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本 书 是 一 本 从 零 开始 学 习 的 微 信 小 程序 开发 入 1 门 书 ， 无 需 额 外 的 基础 。 全书 以 项 目 驱 动 为 未 由 ， 和 循序 渐 
进 、 案 例 丰 富 ， 详 细 介 绍 了 微 信 小 程序 的 入 门 基础 知识 与 使 用 技巧 。 

全 书 共 分 为 12 章 ， 主 要 内 容 包 括 4 个 部 分 。 第 一 部 分 是 入 门 篇 ， 包 括 第 1 章 和 第 2 章 的 内 容 ， 这 两 章 
介绍 了 小 程序 的 由 来 、 首 次 注册 和 创建 项 目 流程 ; 第 二 部 分 是 基础 篇 ， 包 括 第 3 章 和 第 4 章 的 内 容 ， 这 两 章 
介绍 了 小 程序 框架 和 组 件 ; 第 三 部 分 是 应 用 饥 ， 包 括 第 $ 一 11 章 的 内 容 ， 这 7 个 章节 分 别 讲解 了 微 信 小 程序 
中 网 络 API、 媒 体 API、 文 件 API、 数 据 API、 位 置 API、 设 备 API 以 及 界面 API 的 用 法 : 第 四 部 分 是 提高 
篇 ， 包 括 第 12 章 的 内 容 ， 这 一 章节 提供 一 个 综合 应 用 dine ge ed 程序 的 设计 与 实现 ， 综 合 应 
用 了 全 书 所 学 知识 ， 让 读者 所 学 即 所 用 。 全 书包 含 完 整 例题 应 用 110 个 ， 均 在 微 信 Web 开发 者 工具 和 真 机 
中 调试 通过 ， 并 提供 全 套 例题 源 代码 、 练 习题 和 视频 讲解 。 

本 书 可 作为 小 程序 爱好 者 的 零 基础 入 门 选择 , 也 可 作为 前 端 工程 师 和 计算 机 相关 专业 学 生 的 小 程序 开发 
Ta 
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微 信 小 程序 (Mini Program) 是 一 种 轻 量 级 的 应 用 ， 它 实现 了 应 用 “触手 可 及 ”的 梦想 ， 
用 户 无 须 下 载 、 安 装 即 可 在 微 信 中 使 用 小 程序 。 微 信 小 程序 在 基于 Web 前 端 技术 基础 的 同时 
有 其 独特 的 语法 和 框架 ， 提 供 微 信 同 款 UI 和 功能 接口 ， 大 幅度 提高 了 开发 者 的 效率 ， 不 仅 

能 让 零 基 础 入 门 的 开发 者 迅速 上 手 开发 出 美观 有 旦 流畅 的 应 用 ,也 能 给 使 用 者 带 来 优秀 的 体验 。 

本 书 是 一 本 从 零 开 始 学 习 的 微 信 小 程序 开发 入 门 书 ， 读 者 无 需 额外 的 基础 。 全 书 以 项 目 
驱动 为 宗 自 ， 循 序 渐 进 、 案 例 丰 语 ， 详 细 介 绍 了 微 信 小 程序 的 入 门 基础 知识 与 使 用 技巧 。 

全 书 共 4 部 分 12 章 ， 分别 组 成 如 下 。 

第 一 部 分 是 入 门 篇 ， 包 括 第 1 章 和 第 2 章 的 内 容 。 其 中 ， 第 1 章 是 微 信 小 程序 入门， 概 
要 介绍 了 小 程序 的 诞生 、 特 点 和 主要 功能 ， 详 细 讲 解 了 如 何 注册 开发 者 账号 和 完善 信息 ， 以 
及 开发 工具 的 下 载 与 安装 ; 第 2 章 是 第 一 个 微 信 小 程序 ， 从 雯 开始 讲解 新 建 项 目 、 真 机 预览 
和 调试 、 代 码 提交 等 操作 ， 并 基于 该 项 目 介 绍 了 小 程序 的 目录 结构 和 开发 者 工具 的 基本 功能 。 

第 二 部 分 是 基础 扁 ， 包 括 第 3 章 和 第 4 章 的 内 容 。 其 中 ， 第 3 章 是 小 程序 框架 ， 主 要 讲 
解 了 逻辑 层 、 视 图 层 和 基础 布局 模型 flex 的 用 法 ; 第 4 章 是 小 程序 组 件 ， 按 照 功 能 分 类 依次 
介绍 了 视图 容器 、 基 础 内 容 、 表 单 、 导 航 、 媒 体 、 地 图 和 画布 组 件 的 用 法 。 

第 三 部 分 是 应 用 篇 ,包括 第 S$ 一 11 章 的 内 容 。 这 7 章 分 别 讲解 了 微 信 小 程序 中 的 各 类 APL， 
包括 网 络 API、 嫁 体 API、 文 件 API、 数 据 缓 仓 API、 位 置 API、 设 备 API 以 及 界面 API。 

第 四 部 分 是 提高 篇 ， 包 括 第 12 章 的 内 容 。 这 一 章 提 供 了 一 个 综合 设计 应 用 实例 一 一 高 
校 新 闻 小 程序 的 设计 与 实现 。 该 音 从 创建 程序 开始 详细 介绍 了 一 个 仿 网 易 新 闻 小 程序 的 完整 
项 目 开 发 过 程 ， 包 括 页 面 的 布局 样式 设计 、 逻 辑 的 处 理 ， 以 及 相关 API 的 调用 等 。 

本 书 最 后 是 附录 。 本 书包 含 完 整 例题 应 用 110 个 , 均 在 微 信 Web 开发 者 工具 和 真 机 中 调 
试 通 过 ， 并 提供 了 全 套 例题 源 代码 、 练 习题 和 视频 讲解 。 

为 方便 读者 综合 应 用 本 书 所 学 知识 进行 实战 项 目的 开发 ， 本 书 作者 精心 为 每 章 配套 编制 了 
多 个 综合 实战 项 目 ， 已 编 入 《 微 信 小 程序 开发 实战 》， 可 作为 本 书 的 配套 实践 指导 书 。 

最 后 ， 感 谢 清 华 大 学 出 版 社 的 魏 江 江 主 任 、 本 书 责任 编辑 以 及 相关 工作 人 员 ， 非 彰 荣 泣 

能 有 机 会 与 卓越 的 你 们 再 度 合 作 ; 感谢 家 人 和 朋友 给 予 的 关心 和 大 力 支 持 ， 本 书 能 够 完成 与 

你 们 的 但 励 是 分 不 开 的 ; 特别 感谢 刘 宫 和 划 欣 妍 的 文 持 ， 让 我 可 以 专注 于 书稿 的 编写 与 修订 。 

愿 本 书 能 够 对 读者 学 习 微 信 小 程序 有 所 帮助 ， 并 真诚 地 欢迎 读者 批评 指正 ， 和 希望 能 与 读 
者 朋友 们 共同 学 习 成 长 ， 在 浩瀚 的 技术 之 海 不 断 前 行 。 
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微 信 小 程 邦 入 门 


本 章 是 全 书 的 绪论 部 分 , 主要 介绍 微 信 小 程序 概述 、 准 备 工作 和 开发 工具 的 安装 与 使 用 。 
微 信 小 程序 是 一 种 轻 量 级 应 用 程序 ， 自 上 线 一 年 多 来 ， 已 有 超过 58 万 个 小 程序 应 用 和 超过 
1.7 亿 的 日 活跃 账户 数量 ， 作 为 微 信 抱 以 最 大 期 望 的 项 目 ， 小 程序 具有 广阔 的 前 景 


。 了 解 小 程序 的 由 来 、 功 能 和 创建 流程 ; 
de 信息 的 完善 和 成 员 管 理 
。 等 握 开发 者 工具 的 下 载 、 安 装 与 登录 ; 


e。 熟悉 其 他 辅助 工具 的 使 用 。 


1.1.1 小 程序 简介 


微 信 小 程序 也 被 简称 为 小 程序 ， 其 英文 名 称 是 Mini Program。 它 是 一 种 存在 于 微 信 内 部 
的 轻 量 级 应 用 程序 。 微 信 研 发 团队 在 其 官方 网 页 上 有 一 段 关 于 微 信 小 程序 的 介绍 :“ 小 程序 是 
一 种 新 的 开放 能 力 ， 开 发 者 可 以 快速 地 开发 一 个 小 程序 。 小 程序 可 以 在 微 信 内 被 便捷 地 获取 
和 传播 ， 同 时 具有 出 色 的 使 用 体验 。” 

腾讯 公司 高 级 副 总 裁 、 微 信 创 始 人 张 小 龙 曾 在 朋友 圈 上 发 布 关 于 小 程序 的 定义 : 小 程序 
是 一 种 不 需要 下 载 、 安 装 即 可 使 用 的 应 用 ， 它 实现 了 应 用 “触手 可 及 ”的 梦想 ， 用 户 扫 一 扫 
或 者 搜 一 下 即 可 打开 应 用 ， 这 也 体现 了 “用 完 即 走 ” 的 理念 。 用 户 不 用 关心 是 否 安装 太 多 应 
用 的 问题 ,应 用 将 无 处 不 在 ， 随 时 可 用 ， 且 无 须 安装 与 撮 载 。 这 也 是 小 程序 的 几 个 重要 特点 : 
无 须 下 载 与 安装 、 用 完 即 走 、 随 时 可 用 。 
1.1.2 ”小 程序 的 诞生 

微 信 小 程序 于 2017 年 1 月 9 日 正式 发 布 ， 当 天 在 微 信和 的 “发 现 ” 页 面 出 现 了 小 程序 入 
口 〈 见 图 1-1)。 往 前 退 滴 10 年 一 一 2007 年 1 月 9 日 恰好 是 第 一 代 1Phone 手机 正式 发 布 。 

这 两 者 之 间 并 不 是 巧合 ， 张 小 龙 随后 在 朋友 圈 发 出 一 条 写 着 “2007.1.9” 的 状态 ， 同 时 
配 有 iPhone 第 一 代 的 新 品 发 布 图 〈 见 图 1-2)。 张 小 龙 以 这 样 的 形式 向 乔布斯 致敬 。 


人 微 信 小 程序 开发 零 基础 入 门 


》 AllenZhang 
2007.1.9 


图 1-1 微 信 小 程 奈 入 口 图 1-2 张 小 龙 的 微 信 朋友 图 


1.1.3 ”小 程序 的 功能 


小 程序 页 

小 程序 不 是 必须 从 育 页 进入 ， 任 何 一 个 小 程序 页 面 的 当前 信息 都 可 以 直接 被 用 户 分 享 ， 
而 无 顷 从 头 司 动 再 单 击 进 入 。 例 如 分 吾 已 经 得 询 好 结果 的 页 面 ， 好 友 打 开 束 可 以 直接 看 到 实 
时 数据 ， 而 不 必 再 目 己 进行 查询。 

对 话 分 享 

小 程序 支持 对 话 分 译 ， 在 微 信 中 可 以 直接 转发 分 译 小 程序 给 单个 好 友 或 做 信和 群 。 

搜索 查找 

小 程序 可 以 在 微 信 的 “发 现 ” 页 面 中 的 小 程序 入 口 处 被 搜索 查找 到 ， 用 户 可 以 通过 输入 
小 程序 或 品牌 名 称 搜索 目 己 需要 的 小 程序 。 

公众 号 关联 

小 程序 与 微 信 公众 号 之 间 可 以 互相 关联 ， 每 个 公众 号 目前 最 多 可 以 关联 5 个 小 程序 。 

线 下 扫 码 

小 程序 允许 扫 码 使 用 ， 可 以 是 普通 二 维 码 ， 也 可 以 是 小 程序 目 己 特有 的 小 程序 码 。 

小 程序 切换 

小 程序 文 持 后 台 挂 起 切换 ， 用 户 可 以 先 关 闭 小 程序 ， 在 一 定时 间 内 有 再 次 打开 仍然 可 以 保 
持 关 闭 前 的 状态 。 

消息 通知 

使 用 小 程序 的 商家 可 以 同 用 户 及 送 消息 模板 ， 例 如 已 用 货 、 订 单 已 取消 等 。 小 程序 还 为 
用 户 提供 客服 消息 功能 ， 商 家 可 以 与 用 户 进行 线 上 交流 。 
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图 历史 列表 
用 户 使 用 过 的 小 程序 会 自动 进入 “最 近 使 用 ”历史 列表 ， 用 户 注册 


也 可 以 手动 将 小 程序 添加 到 “我 的 小 程序 ”中 ， 以 方便 下 座 使 用 。 
1.1.4 小 程序 的 创建 流程 


小 程序 的 完整 创建 流程 分 为 4 个 步 又， 如 图 1-3 所 示 。 

对 这 4 个 步骤 说 明 如 下 。 

。 注册 : 开发 者 需要 首先 在 微 信 公众 平台 上 进行 小 程序 账号 
注册 。 

e 信息 完善 : 开发 者 注册 完毕 后 需要 填写 小 程序 的 基本 信息 ， 
包括 程序 名 称 、 图 标 、 服 务 范围 等 内 容 。 

。 开发 : 完成 小 程序 开发 者 绑 定 与 开发 信息 配置 后 ， 可 以 下 载 
开发 工具 进行 小 程序 的 开发 与 调试 工作 。 

。 提交 审核 与 发 布 : 完成 小 程序 后 需要 进行 代码 的 上 传 ， 然 后 
由 管理 员 提交 代码 等 待 微 信 团队 审核 , 审核 通过 后 即 可 正式 
发 布 。 


图 1-3 ”小 程 友 的 创建 流程 


本 节 主 要 介绍 如 何 进行 小 程序 账号 的 注册 与 信息 完善 等 开发 前 的 准备 工作 。 
1.2.1 注册 开发 着 账 所 


开 友 者 衣 先 南 要 在 向 信 公 人 欢 平 台 上 注册 一 个 小 程序 账号 ， 这 样 才 能 进行 后 续 的 代码 开 友 
与 提交 工作 。 其 注册 步骤 如 下 : 

访问 微 信 公众 平台 官网 诈 页 (mp.weixin.qq.com)， 然 后 单 击 右上 角 的 “立即 注册 ”按钮 
进入 账号 类型 选择 页 面 ， 如 图 1-4 所 示 。 


香山 此 处 按 乌 一 一 | 包间 | 者 简体 中 文 - 
进行 账号 注册 


再 小 的 个 体 ， 也 有 自己 的 品 叶 和 
向 [| 有 


图 1-4 微 信 公众 平台 官方 首页 


微 信 小 程序 开发 雯 基础 入 门 区 


在 当前 页 面 上 选择 注册 的 账号 类 型 为 “小 程序 ”， 即 可 进入 小 程序 的 正 云 注册 页 面 ， 如 
图 1-$ 所 示 。 


请 选择 注册 的 帐号 类 型 


Ons CY ss 


具有 信息 发 布 与 传播 的 能 力 具有 用 户 管理 与 提供 业务 服务 的 能 力 
适合 个 人 及 媒体 注册 | 适合 企业 及 组 织 注册 


CA 企业 微 信 


原 企业 号 


贞 有 出 色 的 体验 ， 可 以 被 便捷 地 获取 与 传播 具有 实现 企业 内 部 沟通 与 协同 管理 的 能 
适合 有 服务 内 容 的 企业 和 组 织 注册 适合 企业 客户 注册 


图 1-5 ”账号 类 型 选择 页 面 
小 程序 的 正式 注册 页 面包 含 3 个 填写 页 面 ， 即 账号 信息 、 邮 箱 激 活 、 信 息 登 记 。 
账号 信息 
在 账号 信息 填写 页 面 需要 填写 邮箱 、 密 码 、 确 认 密 码 、 验 证 码 以 及 勾 选 确认 协议 条 款 ， 
如 图 1-6 所 示 。 


小 程序 注册 


每 个 邮箱 仅 能 申请 一 个 小 程序 已 有 微 信 小 程序 ? 立即 登录 


iesttasi@qgq.com 


作为 到 录 帐 号 ， 请 韦 写 未 坡 微 信 公 众 平台 注册 ， 未 被 微 信 开 放 平 癌 注 册 ,未 被 


个 人 微 信 号 兰 定 的 邮箱 


Ei sr 
丙 壬 向 信守 但 


GHTE GATE 换 一 张 


“你 已 阅读 并 周 意 《 微 信 公 雁 平台 服务 协议 及 微 信 小 程序 平台 服务 条 靳 小 


图 1-6 小 程序 账号 信息 填写 页 面 
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注意 在 该 图 中 填写 的 邮箱 地 址 必须 符合 以 下 条 件 : 

(1) 未 用 于 注册 过 微 信 公众 平台 。 

(2) 未 用 于 注册 过 微 信 开 放 平 台 。 

(3) 未 用 于 绑 定 过 个 人 微 信号 的 邮箱 。 

此 外 ， 需 要 注意 每 个 邮箱 地 址 只 能 申请 一 个 小 程序 。 如 果 开发 者 当前 暂时 没有 符合 条 件 
的 邮箱 ， 建 议 先 申请 一 个 新 的 邮箱 ， 再 继续 小 程序 的 账号 注册 。 

全 部 填写 完成 并 勾 选 同意 协议 条 款 后 单 击 最 下 方 的 “注册 ”按钮 提交 账号 信息 。 

邮箱 激活 

在 提交 注册 后 会 看 到 邮箱 激活 提醒 ， 此 时 页 面 效果 如 图 1-7 所 示 。 

小 程序 注册 


站) 帐号 信息 名) 郎 箱 激活 


> 


汗 正 公 你 平台 帐 呈 
感谢 注册 ! 确 访 邮 性 已 党 入 于 人 尺 的 注册 邮 御 : wx 
进 , 邮 町 查 看 邮 忻 ， 并 激活 全 次 平 着 帐号 ， 


登录 郭 箱 


漫 有 收 到 | 邮件 ? 
1 、 请 检查 邮箱 地 址 最 否 正确 ， 你 可 以 返回 重新 填写 。 
2、 检 杏 性 的 邮件 垃圾 炸 


3、 奋 仍 来 收 双 | 醒 访 ,请 尝 斌 重新 湛 壕 


1-7 邮箱 账号 激活 提 酝 
登录 对 应 的 注册 邮箱 合 看 激活 邮件 ， 如 图 1-8 所 示 。 
| < 返回 || 回复 | 回扣 全 部 ~| 转发 ~|| 租 除 | 举报 | 标记 为 ~ | 移动 到 ~ | 更 多 ~ | 


”请 激活 你 的 微 信 小 程序 ” 目 户口 号 
老人 忻 具 :| welxinteam<weixinteamB@qq.com > 
人 件 大 :我 < 站 


Hy :2018 年 92 月 D5 22:53 1 


公众 平台 


你 好 ， 
感谢 你 注册 微 信 小 程序 。 
你 的 登录 邮箱 为 : wxdga 他 9.com。 请 点 击 以 下 链接 激活 账号 ， 


httpsiimp. weixin .qq .com wxopen/waactivateemallremalltd3hk i bbOQOWIDWiDaticket=mmveritycodebrokeremall 1 总 对 DR cba0drbfdf53 


如 果 以 上 链接 无 法 点 击 . 请 将 上 面 的 地 址 复制 到 你 的 刘 览 器 地 址 栏 进入 微 信 公 人 区 平台 。 


滞 Kero Zheng 


微 信 产品 经 理 


1-8 小 程序 激活 邮件 


单 击 邮件 正文 中 的 链接 地 址 跳 转 回 第 信 平 台 页 面 完 成 账号 的 激活 。 
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信息 登记 
邮箱 账号 激活 完成 后 就 进入 了 信息 登记 页 面 ， 如 图 1-9 所 示 。 


小 程序 注册 


注册 国家 /地 区 保持 默认 内 容 “ 中 国 大 陆 ” 然后 根据 实际 情况 进行 主体 类 型 的 选择 。 
目前 小 程序 允许 注册 的 主体 类 型 共有 5 种 ， 即 个 人 人、 企业、 政府 、 浆 体 及 其 他 组 织 ， 详 情 见 
表 1-1。 


PT" Er sr he Te AT 和 a 
() 帐号 信息 叫 ) 邮箱 激活 他 ) 信息 登记 


用 户 信 息 登 记 


微 信 公 从 平台 致力 于 打造 贞 实 ， 人 语法， 有 效 的 互联 网 平台 。 为 了 更 好 的 保障 傈 fn 广大 微 信 用 户 的 合法 权益， 请 你 让 息 填 写 以 下 登记 信息 。 
为 表述 方便 ， 本 服务 中 ，“ 用 户 ” 也 称 为 “开发 者 ”或 "你 ” ，。 


用 户 信息 登记 审核 通过 后 : 

1. 你 可 以 依法 享有 本 微 信 公众 帐号 所 产生 的 权利 和 收益 , 

2. 你 尾 对 本 微 信 公允 帐 号 的 所 有 行为 承担 全 部 责任 ; 

3. 你 的 注册 信息 将 在 法 律 苑 许 的 范围 内 向 微 信 用 户 展 示 ; 

4 人 民法 院 、 检 察 院 、 会 安 机 关 等 有 要 机 关 可 向 腾讯 依法 调职 你 的 注册 信息 等 。 


请 确认 你 的 微 信 会 你 帐号 主体 糯 型 局 于 政府 、 媒 体 、 企 业 ， 其 他 组 织 ， 个 人 ， 并 请 按照 对 应 的 类 别 进行 信息 登记 。 
点 击 查看 微 信 公众 平台 信息 登记 指引 。 


注册 国家 /地 区 中 国 大 陆 ~ 


主体 类 型 如 何 选择 主体 类型 ? 
个 人 企业 政府 媒体 其 他 组 织 


个 人 类 型 包括 : 由 自然 人 注册 和 运营 的 公众 帐号 ， 


帐号 能 力 : 个 人 尖 型 暂 不 赤 持 微 信 认 证 . 竹 信 支付 及 高 级 接口 能 力 . 


图 1-9 ”小 程序 信息 登记 页 面 


表 1-1 小 程 奈 账 号 的 主体 类 型 介绍 


账号 主体 类 型 解释 
A 必须 是 年 满 18 岁 以 上 的 微 信 实 名 用 户 ， 并 且 具 有 国内 号 份 信息 
企业 企业 、 分 支 机 构 、 个 体 工 商户 或 企业 相关 品牌 
政府 国内 各 级 、 否 类 政府 机 构 /事业 时 位 ， 以 及 县 有 行政 职能 的 社会 组 织 专 ， 主要 徐 讲 公安 机 
: 构 、 和 沈 团 机 构 、 司 法 机 构 、 交 通 机 构 、 旅 游 机 构 、 工 商 税 务 机 构 、 市 政 机 构 等 
妹 体 报纸 、 杂 志 、 电 视 、 电 台 、 通 讯 社 等 


其 他 组 织 不 属于 政府 、 媒 体 、 企 业 或 个 人 的 其 他 类 型 


由 于 本 书 为 零 基础 开发 者 小 程序 入 门 ， 因 此 请 读者 选择 个 人 类 型 。 企 业 类 型 账号 注册 需 
要 企业 缴费 认证 ， 而 政府 、 媒 体 或 其 他 组 织 账号 注册 需要 通过 微 信 验 证 主体 单位 的 身份 ， 对 


于 这 几 种 类 型 暂 不 介绍 。 后 续 可 以 由 开发 者 自行 申请 这 些 其 他 主体 类 型 。 


选择 “个 人 ”类 型 之 后 ， 由 和 面 下 方 将 自动 出 现 主体 信息 登记 表单 ， 如 图 1-10 所 示 。 
开发 者 需要 如 实 填 写 且 份 证 姓名 、 刁 份 证 号 码 和 管理 员 手 机 号 码 《〈 一 个 手机 号 码 只 能 注 
册 5 个 小 程序 )， 然 后 单 击 “ 获 取 验 证 但 ” 投 钮 等 竺 手机 短信 ， 在 收 到 的 短信 中 会 提供 一 个 6 


位 验证 但 ， 如 图 1-11 所 示 。 


主体 类 型 


土 体 信息 登记 


身份 证 号 码 


管理 员 手 机 号 码 


得 信 验 证 码 


管理 员 身 份 验证 
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如 何 选择 主体 类 型 1 
个 人 企业 政府 媒体 其 他 组 织 


个 人 类 型 包括 : 由 自然 人 注册 和 运营 的 公众 帐 
帐号 能 力 : 个 人 类 型 暂 不 支持 微 信 认 证 、 i 高 级 接口 能 力 。 


信息 审核 成 功 后 身份 证 姓名 不 可 修改 ; 如 果 名 字 包 含 分 隔 号 “”， 请 勿 
Le 


请 输入 您 的 刁 份 让 号 码 。 一 个 号 份 证 号 码 只 能 广 册 5 个 小 程 友 。 


请 输入 您 的 手机 号 码 ， 一 个 手机 号 码 只 能 注册 5 个 小 程序 。 


无 法 接收 验证 码 ? 
请 输入 手机 短信 收 到 的 6 位 验证 码 


请 先 填 与 党 理 员 身份 信息 


图 1-10 小 程 友信, 息 登 记 页 面 


机 中 古国 上 量 3 会 下 午 11:14 感 了 下 二 46% 轩 


《 OO @ 


1065907729063620011 


短信 /彩信 
今天 下 午 11:14 


【腾讯 科技 】 
681644 ( 微 信 公 众 平 
= 十 分 钟 内 有 


图 1-11 小 程序 验证 码 短信 


Ti 微 信 小 程序 开发 入 基 础 入 门 “ 蕊 J7 


注意 ， 验 证 码 必须 在 10 分 钟 之 内 填写 ， 否 则 会 失效 而 需要 重新 获取 。 填 写 完 成 后 在 下 
方 的 “管理 员 身 份 验 证 ” 栏 中 会 目 动 出 现 一 个 二 维 码 ， 如 图 1-12 所 示 。 


主体 类 型 如 何 选 择 主 体 类 型 ， 
Tn 企业 政府 媒体 其 他 组 织 


个 人 类 型 包括 : 由 自然 人 注册 和 运营 的 公众 帐号 。 
一 村 
~ 有 BE 


Tr 
帐号 能 力 ; 个 人 类型 篆 不 运 持 微 信 认证 、 微 信和 支付 及 高 级 接口 能 力 。 


主体 信息 登记 


身份 证 姓名 周 村 . 明 
信息 审核 成 功 后 身份 证 姓名 不 可 修改 ; 如 里 名 字 包 含 分 隔 号 请 和 缴 
省 略 。 

身份 证 号 码 34802198 11082 


请 输入 您 的 身份 证 号 码 。 一 个 喘 份 证 号 码 只 能 注册 5 个 小 程序 。 


审理 员 手 机 号 的 > 3 J21 
请 输入 您 的 手机 号 码 ， 一 个 手机 号 码 只 能 注册 5 个 小 程序 。 


短信 验证 码 681644 无 法 接收 验证 码 ? 
请 输入 手机 短信 收 到 的 6 位 验证 本 


请 用 管理 员 本 人 微 信 扫 描 二 维 码 。 本 验证 方式 不 
扣除 任何 费用 。 注 册 后 ， 扫 码 的 微 信 号 将 成 为 该 
帐号 的 管理 员 微 信号 。 


图 1-12 ”省 理 员 映 份 验证 栏 中 出 现 二 维 码 


此 时 ， 需 要 官 理 员 用 本 人 短信 扫 插 页面 上 提供 的 二 维 码 进行 时 份 确认 ， 这 种 验证 方式 是 
金 费 的 。 扫 人 码 后 ， 手 机 人 微 信 会 目 动 跳 转 到 微 信 验 证 页 面 ， 如 图 1-13 所 示 。 

检查 微 信 验证 页 面 上 所 显示 的 姓名 和 里 份 证 号 码 ， 确 认 无 误 后 单 击 “ 确 定 ” 按 钮 ， 系 统 
会 提示 里 份 验证 成 功 ， 如 图 1-14 所 示 。 


{YO 第 1 章 ， 微 信 小 程序 入 门 


下 午 11:17 6 人 中 国 全 下 午 11:18 
微 信 验证 《返回 关闭 。 微 信 验 证 


微 信 小 程序 注册 身份 确认 
姓名 周 赎 草 
身份 证 号 3449998196nGaodud082 


点 击 俏 认 ， 周 直击 将 作为 小 程序 的 党 理 员 。 


你 的 号 份 已 验证 


管理 员 对 本 帐号 的 任何 登录 、 确 认 、 操 作 、 你 将 使 用 管理 员 的 身份 注册 微 信 小 程序 


合理 地 谨慎 操作 。 确定 
角 定 
。 腾讯 将 在 接收 到 人 民法 院 、 检 察 院 、 公 安 机 
关 等 调 取 要 求 时 ， 提 供 你 的 个 人 信息 。 


1-13 ”手机 微 信 验证 身份 确认 页 面 1-14 手机 微 信 验 证 成 功 页 面 


此 时 该 微 信号 束 会 馈 登 记 为 官 理 员 做 信 写 ， 并 且 PC 问 的 网 页 画面 也 将 同步 握 示 “号 份 
验证 成 功 ”， 如 图 1-15 所 示 。 


沼 理 员 身 份 验证 


多 身份 验证 成 功 
| 局 击 往 作为 小 程序 的 管理 员 。 


1-15 ”过 理 员 身 份 验证 成 功 


单 击 “ 继 续 ” 按 钮 进行 下 一 步 ， 系 统 会 弹出 一 个 提示 框 让 开发 者 进行 最 后 的 确认 ， 如 图 
1-16 所 示 。 
单 击 “确定 ”按钮 完成 主体 信息 的 确认 ， 会 出 现 如 图 1-17 所 示 内 容 。 


六。 微 信 小 程序 开发 零 基础 入 门 二 


主体 信息 提交 后 不 可 修改 


主体 名 称 : 局 计时 
主体 类 型 : 个 人 


该 主体 一 经 提交 ， 将 成 为 你 使 用 微 信 公众 平台 各 项 服务 与 功能 的 唯一 法 
律 主 体 与 缔约 主体 ， 在 后 续 开 通 其 他 业务 功能 时 不 得 变更 或 修改 。 腾讯 
将 在 法 律 允 许 的 汉 围 内 向 微 信 用 户 展示 你 的 注册 信息 ， 你 需 对 填写 资料 
的 具 实 性 、 合 法 性 、 准 硝 性 和 有 效 性 承担 责任 ， 人 否则 腾讯 有 权 拒 绝 或 众 
止 提供 服务 。 


1-16 主体 信息 确认 提示 框 


信息 提交 成 功 。 


你 可 以 前 往 微 信 公 众 平台 使 用 相关 功能 。 


1-17 信息 提交 成 功 提示 框 


第 1 章 ， 微 信 小 程序 入 门 


当前 可 以 且 接 单 击 “ 前 往 小 程序 ”按钮 进入 小 程 订 官 理 页 面 ， 此 时 账号 是 献 认 登录 后 的 
状态 ， 可 以 卫 接 进行 小 程序 的 后 续 官 理工 作 ， 如 图 1-18 所 示 。 


和 微 信 公 全 平台 | 小 程序 


人 ls 小 程序 发 布 流 程 


二 小 程序 信息 朴 壳 小 程序 的 车 本 篇 捍 ， 如 名 称 ， 图 标 ， 捞 示 等 


小 程序 开发 与 管理 滔 加 开 有 性 审 
开导 工具 下 载 开 癌 音 工具 进行 人 只 的 开 洛 和 上 传 : 昔 通 小 程 座 开 监 者 工具 ， 小 这 戏 开 营 甫 工具 

浪 加 开发 者 漆 加 开 合 音 ， 进 行 化 码 上 任 

配 疝 服 芭 器 在 开发 识 簿 而 而 吉 看 站 PiC 和 AppSecret , 配 册 服务 咒 二 儿 

大 动 太 档 可 以 间 需 入门 刘 绍 【和 葡 甬 小 程序 1 ， 开 营 训 得 1 六 和 小 程序 败 游 观 )、 设 计 和 失范 和 运营 帘 范 


1-18 小 程 友 害 理 页 面 


现在 小 程序 的 账号 注册 束 全 部 完成 了 ， 之 后 用 尸 可 以 访问 做 信人 公众 平台 (mp.weixin.qq. 
com) 手动 输入 账号 和 密码 登录 进入 小 程序 官 理 页 面 。 


1.2.2 小 程序 的 信息 完善 
在 账号 注册 完成 后 还 需要 完善 小 程序 的 基本 信息 ， 如 表 1-2 所 示 。 
表 1-2 小 程序 的 基本 信息 内 容 介绍 


填写 内 容 修 改 次 数 
各 记名 区 。 | 小 程序 名 称 需要 控制 在 4~30 个 字符 ， 并 且 不 得 与 平 | 付 布 机 生 全 全 
个 生字 名 各 | 台 内 已 经 存在 的 其 他 账号 名 称 重 名 ee 
再 通过 微 信 认 证 改名 
图 片 格式 只 能 是 png、bmp、 jpeg、 jpg 和 gif 中 的 一 种 ， 
小 程序 头像 ” ”| 并 且 文件 不 得 大 于 2MB; 注意 头像 图 片 不 允许 涉及 政 | 每 个 月 可 修改 5 次 
治 敏 感 与 色情 内 容 ， 图 片 最 后 会 被 切割 为 圆 形 效果 


有 字数 必须 控制 在 4 一 120 个 字符 , 介绍 内 容 不 得 含有 国 
站 家 相关 法 律 /法 规 禁止 的 内 容 
服务 类 目 分 为 两 级 , 每 一 级 都 必须 填写 , 不 可 以 为 空 ; 
小 程序 服务 类 目 | 服务 类 目 不 得 少 于 1 个 ， 不 得 多 于 5 个 :特殊 行业 需 | 每 个 月 可 以 修改 1 次 
要 额外 提供 资质 证 明 


每 个 月 可 以 申请 修改 5 次 


小 程序 名 称 

小 程序 名 称 的 长 度 需 要 控制 在 4 一 30 个 字符 ， 其 中 一 个 中 文字 占 两 个 字符 。 在 小 程序 发 
布 前 有 两 次 改名 机 会 ， 两 次 改名 机 会 用 完 后 必须 先 发 布 再 通过 微 信 认证 改名 。 

由 于 小 程序 名 称 不 允许 与 平台 内 已 经 存在 的 其 他 账号 名 称 重 名 ， 用 户 在 填写 好 之 后 可 以 
先 上 自 测 一 下 是 否 符合 要 求 ， 单 击 右 侧 的 “检测 ”按钮 即 可 进行 验证 。 

如 果 该 名 称 与 其 他 公众 号 名 称 重 复 ， 会 出 现 失败 提示 ， 如 图 1-19 所 示 。 

如 果 该 名 称 没 有 被 占用 ， 检测 后 会 显示 “你 的 名 字 可 以 使 用 ”字样 ， 如 图 1-20 所 示 。 该 
图 表示 该 名 称 允 许 使 用 ， 接 下 来 束 可 以 上 传 图 片 了 。 

小 程序 头像 

小 程序 头像 也 就 是 小 程序 最 终 显示 的 图 标 logo， 图 片 最 后 会 被 切割 为 圆 形 效 果 。 头 像 图 
片 的 格式 只 能 是 pnpg、bmp、jpeg、jpg 和 gf 中 的 一 种 ， 并 且 文 件 不 得 大 于 2MB。 注 意 ， 头 


人 微 信 小 程序 开发 零 基础 入 门 世 J 


像 图 片 不 允许 涉及 政治 敏感 与 色情 内 容 。 另 外 ， 头 像 图 片 每 个 月 可 修改 5 次 。 
微 信 检测 
该 名 称 与 已 有 公众 号 名 称 重复 ， 需 与 该 小 “~ 


程序 帐号 相同 主体 才 可 申请 ， 查 看 同名 帐 
号 。 如 果 你 认为 已 有 名 称 侵 犯 了 你 的 合法 


权益 ， 可 进行 侵权 投诉 。 

帐号 名 称 长 度 为 4-30 个 字符 ， 一 个 中 文字 
等 于 2 个 字符 。 提 交 名 称 前 请 检测 名 称 是 否 
可 用 。 上 点击 了 解 更 多 名 称 规则 


图 1-19 ”小 程序 名 称 检测 失败 提示 


小 程序 名 称 ‘msm en 14/30 
你 的 名 字 可 以 使 用 


帐号 名 称 长 度 为 4-30 个 字符 ， 一 个 中 文字 
re A 


等 于 2 个 字 行 。 提 交 名 称 前 请 检测 名 称 是 否 
可 用 。 扣 击 了 解 更 多 名 称 规 则 


1-20 小 程序 名 称 检测 成 功 提示 
早 击 “选择 图 片 ” 投 钮 ， 即 可 选择 图 片 进行 上 传 ， 如 图 1-21 所 示 。 


新 头像 不 多 评 涉 及 政治 敏感 与 色情 ; 
图 片 格式 必须 为 : png,bmp,jpeg,jpg,gif ; 不 可 大 于 2M ; 建议 使 用 png 格 式 图 片 ， 以 
保持 最 佳 效 果 ; 建议 图 片 尺寸 为 144px*144px 


头像 预览 


1-21 小 程序 头像 上 传 


根据 官方 提示 ， 建 议 上 传 png 格式 的 图 片 并 且 图 片 尺寸 为 144 像素 X144 像素 ， 以 保持 
最 佳 效 果 。 

小 程序 介绍 

小 程序 介绍 可 以 由 开发 者 自由 填写 关于 小 程序 功能 的 描述 ， 注 意 介 绍 内 容 不 得 含有 国家 
相关 法 律 /法 规 禁 止 的 内 容 。 男 外 ， 小 程序 介绍 的 内 容 每 个 月 可 以 申请 修改 5 次 。 

小 程序 介绍 对 应 的 字数 必须 控制 在 4 一 120 个 字符 ， 文 本 框 带 有 自动 检测 字数 的 功能 ， 
如 图 1-22 所 示 。 


{YY 第 1 章 微 信 小 程序 入 门 中 


小 程序 介绍 了 这 是 一 段 小 程序 介绍 ， 请 读者 们 填写 目 
己 实际 需要 的 内 容 ， 注 意 字数 不 要 超标 
就 可 以 了 。 


78/120 


请 确认 介绍 内 容 不 合 国 家 相关 法 律 
法 规 禁 止 内 容 ,介绍 字数 为 4~120 


个 字 


图 1-22 ”小 程序 介绍 


小 程序 服务 类 目 
小 程序 服务 类 目 指 的 是 小 程序 主要 内 容 所 属 的 服务 范围 ， 特 殊 行 业 需 要 额外 提供 资质 证 


明 。 柬 外 ， 服 务 闫 目 每 个 月 只 可 以 修改 1 次 。 


服务 类 目 分 为 两 级 ， 每 一 级 部 必须 赴 写 ， 不可 以 为 宇 ， 如 图 1-23 所 示 。 


请 根据 小 程序 目 身 的 功能 ， 正 确 选 择 服务 类 目 。 


服务 类 目 教育 v 在 线 教育 


图 1-23 ”小 程序 服务 类 目的 两 级 选项 
如 条 有 多 个 服务 范围 需要 退 加 ， 可 以 单 击 右 侧 的 “十 ”号 进行 讨 加 ， 如 图 1-24 所 示 。 
请 根据 小 程序 自身 的 功能 ， 


服务 类 目 请 选择 


图 1-24 ”小 程序 服务 类 目的 追加 


如 宁 需 要 去 折 多 余 的 服务 范围 ， 将 良 标 指针 移动 到 需要 删除 的 服务 关 目 上 ， 人 然后 单 击 右 


侧 出 现 的 “一 ”号 进行 删除 即 可 ， 如 图 1-25 所 示 。 


请 根据 小 程序 目 身 的 功能 ， 正 确 选择 服务 类 目 。 


服务 类 目 请 选择 


服务 类 目 请 选择 


服务 类 目 请 选择 


1-25 小 程序 服务 类 目的 删除 


和 微 信 小 程序 开发 零 基础 入 门 “二 


注意 : 小 程序 的 服务 类 目 最 少 有 1 个 ， 最 多 只 能 有 5 个 。 


全 部 填写 完 于 后 就 可 以 单 击 最 下 方 的 “提交 ” 控 钮 提交 小 程序 的 基本 信息 ， 完 成 后 可 以 
看 到 如 图 1-26 所 示 的 界面 。 


小 程序 发 布 流程 


step 


小 程序 信息 ”补充 小 程序 的 基本 信息 , 如 名 称 、 图 标 、 描 述 等 


小 程序 开发 与 管理 
开发 工具 下 载 开发 者 工具 进行 代码 的 开发 和 上 传 ， 普 通 小 程序 开发 者 工具 、 小 游戏 开发 者 工具 


添加 开发 者 添加 开发 者 ， 进 行 代码 上 传 
要 服务 器 在 开发 设置 页 面 查 看 ApPID 和 Appsecret ,配置 服务 器 域名 
帮助 文档 可 以 阅读 入 门 介 绍 ( 普通 小 程序 ) 、 开 发 文档 辣 通 小 程 启 小 游戏 ) 、 设 计 规 范 和 运营 规范 


版 本 发 布 先 提 必 代码， 然后 提交 审 樟 ， 审核 通过 后 可 发 布 


图 1-26 “小 程序 信息 填写 完成 
此 时 半 击 “添加 开 及 者 ”按钮 束 可 以 进行 小 程序 的 成 员 管理 了 。 
1.2.3 ”小 程序 的 成 员 管 理 


除了 管理 员外 ， 还 可 以 为 小 程序 追加 其 他 项 目 成 员 。 具 有 管理 员 身 份 的 开发 者 登录 后 可 
以 在 小 程序 管理 后 台 统 一 管理 项 目 成 员 ， 并 为 他 们 分 别 设置 对 应 的 权限 。 
闻 成 员 类 型 说 明 
管理 员 可 以 为 小 程序 添加 开发 者 、 体 验 者 以 及 其 他 权限 的 项 目 成 员 。 
对 项 目 成 员 可 以 被 分 配 的 不 同 权 限 说 明 如 下 。 
。 开发 者 : 可 以 使 用 微 信 web 开发 者 工具 进行 小 程序 的 开发 ， 也 可 以 预览 开发 版 小 程 
序 在 手机 端的 效果 。 
。 体验 者 : 可 以 在 手机 端 使 用 体验 版 小 程序 。 
。 登录 : 无 须 管理 员 确 认 即 可 登录 小 程序 管理 后 台 。 
。 数据 分 析 : 可 以 使 用 小 程序 数据 分 析 功能 查看 小 程序 数据 。 
。 开发 管理 ， 拥 有 小 程序 提交 审核 、 发 布 和 回 退 权限 。 
。 开发 设置 : 拥有 设置 小 程序 服务 器 域名 、 消 息 推送 以 及 扫描 普通 链接 二 维 码 打开 小 程 
序 的 权限 。 
暂停 服务 设置 拥有 暂停 小 程序 线 上 服务 的 权限 。 
园 成 员 人 数 限制 
个 人 类 型 的 小 程序 允许 管理 员 添 加 15 个 开发 者 ， 其 中 5 个 开发 者 和 10 个 体验 者 。 其 他 
类 型 的 小 程序 开发 者 的 数量 限制 如 下 。 
。 未 认证 未 发 布 组 织 类 型 : 30 人 。 
。 已 认证 未 发 布 /未 认证 已 发 布 组 织 类 型 ， 60 人 。 
。 已 认证 已 发 布 组 织 类 型 ， 90 人 。 
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成 员 变 更 说 明 
每 个 小 程序 的 管理 员 与 项 目 成 员 都 是 允许 变更 的 。 需 要 注意 的 是 ， 每 个 微 信 号 作为 项 目 
成 员 最 多 可 以 参与 到 50 个 小 程序 中 。 


在 完成 准备 工作 之 后 束 可 以 进行 小 程序 的 开 友 了 了， 小 程序 具有 官方 提供 的 专属 开 及 工 
具 一 一 “做 信 web 开 友 痢 工 具 ”( 面 称 “ 开 友 者 工具 ”)。 


1.3.1 软件 的 下 载 与 安装 


开 友 首 登 录 小 程序 管理 页 面 后 台 ， 然 后 单 击 右上 角 沫 单 栏 中 的 “ 开 肥 ”选项 即 可 切换 到 
小 程序 开 友 工具 的 下 载 页 面 ， 也 可 以 直接 通过 URL 地 址 访问 下 载 页 面 ，URL 地 址 为 
“https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 。 

在 该 页 面 需 要 根据 目 己 的 计算 机 操作 系统 的 基 型 选择 对 应 的 下 载 地 址 。 目 前 提供 的 3 种 
下 载 地 址 与 计算 机 操作 系统 的 对 应 天 系 如 下 。 

e Windows 64: Windows 64 位 操作 系统 。 

e Windows 32: Windows 32 位 操作 系统 。 

e Mac: Mac 操作 系统 。 

说 明 : 本 书 下 载 的 是 Windows 64 厂 本 ， 旋 者 请 根据 实际 情况 选择 对 应 的 软件 进行 下 载 。 

这 里 以 Windows 64 版 本 为 例 , 下 载 完 成 后 用 户 会 获得 一 个 EXE 应 用 程序 文件 , 如 图 1-27 
所 示 。 


名 称 修改 日 期 类 型 大 小 


Wwechat devtools 1.02.1801081_x64.exe 2018/1/11 20:20 应 用 程序 75,765 KB 


1-27 微 信 web 开发 者 工具 的 安 禾 文件 


该 图 中 的 “1.02.1801081” 为 软件 版 本 号 ，“_x64” 表 示 Windows 64 位 版 本 软件 。 读 者 
可 以 根据 文件 名 再 次 确认 是 否 下载 了 正确 的 版 本 。 
确认 无 旋 后 ， 双 击 访 文 件 进行 开 肥 着 工具 的 安放 ， 安 逆 过 程 如 图 1-28 所 未 。 


微 信 web 开 发 者 工具 1.02.1803210 安装 - 口 加 微 信 web 开 发 者 工具 1.02.1803210 安装 一 = 


许可 证 协议 
微 信 web 并 上 下 二 9 一 之 忆 所 jp 
欢 et 使 用 "向 仿 pe 在 安装 “ 微 信 wab 开 发 者 工具 1.02 1803210” 之前， 请 阅读 授权 协 议 图 
瑟 - < 一 届时 由 中 由 he 生生 吉 和 
这 人 向 史 指 引 估 室 克 、 估 信 web 开 发 者 工具 按 [PeDn] 阅 赎 “授权 协议 ”的 基 余 部 分 


向 信 公 从 平台 开 点 者 服务 协 识 ~ 


争 千 缚 让 叶 关闭 持 他 所 有 应 用 程 认 
A t 人 站 欢迎 你 他 用 徽 信 汉 众 平台 开发 者 服 夯 ! 
tg 为 使 用 该 项 服务 ， 你 应 当 阅读 并 遵守 《 微 信 公 众 平台 开发 者 服务 协议 # 《以 下 漳 
要 称 “ 本 协议 ”) ， 以 及 如 及 讯 服务 协议 》% 、 必 腾讯 微 信 软件 许可 及 服务 协议 多 、 
忆 筑 信 公 众 平台 服务 协议 3 。 本 协议 被 视 为 如 用 讯 服 务 协 说 六 及 过 腾讯 微 信 软件 
许可 及 服务 协议 $ 的 补充 协 说 ， 星 其 不 可 分 割 的 组 成 部 分 ， 与 其 构成 统一 整体 。 
本 协议 与 上 还 内 容 存 在 冲突 的 ， 以 本 协议 为 准 。 


HT em lil, 


a 


下 一 步 Q) >| 职 消 民 ) ¢ 上 一 步 (P) | 我 搓 受 (IT) | | 职 消 (C) 


I (Cb) 授权 许可 证 协议 
图 1-28 微 信 web 开发 者 工具 的 安装 过 程 


择 安 装 位 轩 
选择 “ 微 信 web 开 发 者 工具 1 .02 1803210” 的 声 装 文 半 去。 [| 


和 微 信 小 程序 开发 零 基础 入 门 “万 


短信 web 开 发 者 工具 1.02.1803210 安装 - 口 医 一 | 四 


RE 


微 信 web 开 发 者 工具 1.02.1803210 安装 ”一 一 


正在 安装 
“ 微 信 web 开 发 者 工具 1. 02, 1803210” 正在 安装 ， 请 等 假 .… 图 


ForInRi eht. 到 


' 有 Natten 1s 商 
: fattanDeap. | 


担 职 ; £lattenDerth. is 
抽取 : flip. js 
抽取 :oor j 
er un Flles (xBB) Tencent'‘ il 二 web 开 志 村 | 居 ", 浏览 司 ). AN 

| 由 耳 forEuah, is 

所 到 空间 ，4 申 .1 搓 取 于 ar 荆 eHRL 必 hh 二， 

可 用 空间 :; 47. 488 换取; forIn. js ” 

< 上 一 步 (P} | 安装 (I) 职 消 (C) © 上 一 上 东 (fF) 下 一 步 iN) 取消 (C 
(c) 选择 安装 位 置 (d) 正在 安装 
图 1-28 【〔 续 ) 
安装 完成 后 的 页 面 如 图 1-29 所 示 。 
加 微 信 web 开 发 者 工具 1.02.1803210 安装 ”一 9 


安 狼 完成 


感 调 你 合用 祝 六 web 开 点 者 工 且 1.02.1803210 


[MY 运行 往 信 web 开 发 痢 工 且 1.02. 1803210(R) 


步 {tP) | 完成 钙 ) 取消 已) 


图 1-29 微 信 web 开发 者 工具 的 安 才 完成 弄 面 


1.3.2 开发 者 工具 的 登录 


做 信 web 开 太 者 工具 在 使 用 开 友 者 做 信 账 号 登录 后 ， 才 可 以 进行 小 程序 的 开发 。 


开发 者 身份 验证 


与 一 般 手 动 输 入 账号 和 密 伺 的 注 程 不 同 ， 微 信 web 开 友 者 工具 使 用 做 信和 扫 拍 二 维 人 码 的 
方式 验证 开发 痢 映 份 。 在 PC 并 双击 微 信 开 友 者 工具 图 标 会 弹出 二 维 码 扫 朱 页 面 ， 如 图 1-30 


所 示 。 


开发 者 用 手机 微 信 扫 接 PC 端 的 二 维 码 确认 号 份 ， 手 机 闯 的 效果 如 图 1-31 所 示 。 
在 图 1-31 中 ， 图 (a) 为 单 击 手 机 短信 右上 角 的 加 号 出 现 的 下 拉 且 持 ， 选 择 其 中 的 “ 扫 
一 扫 ” 选 项 进行 二 维 码 扫 朱 : 图 (b) 为 扫 人 码 成 功 后 跳 转 的 提示 页 面 ， 用 户 早 击 “ 确 认 登 录 ” 


按钮 即 可 登录 并 使 用 做 信 开 友 痢 工具 。 
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请 使 用 微 信 扫 摘 二 维 码 登录 


图 1-30 


入 发 起 群 聊 
全 添加 朋友 
扫 一 扫 


收 付 芭 


es | 
| 画 扎 


者 证 定 利 工 贡 记 本 


汪 现 


(a) 手机 微 信 “ 扫 一 扫 ” 选 项 


图 1-31 


二 维 码 扫 搞 页面 


< 返回 


下 午 2:58 
人 


切入 如 守 全 异 好 


是 否 确 认 登 录 微 信 web 开 发 者 工具 
周 试 过 程 中 开发 者 可 通过 绑 定 公众 号 获得 你 的 相 


(b) 扫 码 后 手机 微 信 出 现 确认 提示 


手机 微 信 扫 码 过 程 


在 这 个 过 程 中 PC 端的 由 和 面 变 化 如 图 1-32 所 示 。 


在 图 1-32 中 ， 图 (a) 为 手机 微 信 扫 码 成 功 后 出 现 的 提示 页 面 ， 注 意 访 
J 期; 图 (b) 号 未 的 洒 音 页 面 是 当 开 发 者 在 手机 生 信 上 
“确认 有 登录” 投 钮 后 才 会 出 现 的 ， 此 时 融 可 以 正 却 进行 


化 的 ， 并且 长 时 间 不 扫 手 会 超时 过 


二 维 码 是 动态 变 


本 微 信 小 程序 开发 零 基础 入 门 


微 信 开 友 者 工具 


忆 


微 信 开 上 友 者 工具 


扫 拍 成 功 


请 使 用 微 信 扫 摘 二 维 码 登录 


切换 帐号 ， 切换 帐号 ， 


(a) 扫 码 成 功 的 提示 页 面 (b) 确认 登录 后 的 某 单 页 面 
图 1-32 页面 变 化 
开发 者 账号 切换 
微 信 开发 者 工具 允许 在 同一 台 计 算 机 上 切换 不 同 的 开发 者 。 如 果 用 户 登 录 后 发 现 需要 更 
换 账 号 ， 可 以 单 击 菜单 页 面 右 下 角 的 “切换 账号 ”选项 回 到 二 维 码 扫描 页 面 ， 然 后 使 用 其 他 
开发 者 微 信 账号 重新 扫 码 登录 ， 如 图 1-33 所 示 。 


微 信 开 上 友 者 工具 做 信 开 发 者 工具 


中 义 


se 


J ee I Th 
i ill a Ci si 


小 程序 项 目 公众 号 网 页 项 目 


ee 请 使 用 微 信 扫 搭 二 维 码 登 录 
切换 账号 >， 


(a) 开发 者 账号 切换 选项 (b) 重新 回 到 二 维 码 扫描 页 面 
图 1-33 开发 者 账号 切换 
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1.3.3 ”其 他 辅助 工具 


小 程序 官方 文档 

小 程序 官网 提供 了 拉 术 文档 供 开 友 者 学 习 ， 文 档 会 更 新 各 类 小 程序 接口 的 用 法 ， 布 望 在 
第 一 时 间 了 解 小 程序 有 哪些 更 新 的 谈 者 可 以 关注 。 

官方 文档 访问 地 址 : https://developers.weixin.qq.com/miniprogram/dev/。 

微 信 开放 社区 

在 微 信 开 放 社 区 中 有 一 个 开发 者 专区 可 以 搜索 币 见 问题 和 解答 ， 用 户 也 可 以 在 遇 到 问题 
时 据 问 ， 与 其 他 开 肥 者 一 起 交流 学 习 。 

开 有 友 者 社区 访问 地 址 : https:Wdevelopers.weixin.qq.comy/。 

图 小 程序 开发 者 助手 

使 用 小 程序 开发 者 助手 可 以 方便 、 快 捷 地 预 抠 和 体验 线 上 版 本 、 体 验 版 本 及 开 友 版 本 。 
开 友 者 可 以 通过 扫 一 扫 图 1-34 所 示 的 开发 者 助手 小 程序 码 使 用 相关 功能 。 

小 程序 运营 数据 

小 程序 数据 分 析 是 面向 小 程序 开发 者 、 运 营 者 的 数据 分 析 工具 ， 提 供 关键 指标 统计 、 实 
时 访问 监控 、 自 定义 分 析 等 ， 帮 助 小 程序 产品 选 代 优 化 和 运营 。 其 主要 功能 包括 每 日 例 行 统 
计 的 标准 分 析 ， 以 及 满足 用 户 个 性 化 需求 的 目 定义 分 析 。 

开 肥 者 在 小 程序 上 线 后 有 两 种 方式 可 以 方便 地 看 到 小 程序 的 运营 数据 。 

。 方法 一 : 登录 小 程序 官 理 后 侣 ， 单 击 “ 数 据 分 析 ”， 然 后 单 击 相应 的 tab 可 以 看 到 相 

天 的 数据 。 
。 方法 二 : 使 用 小 程序 数据 助手 在 微 信 中 方便 地 租 看 运营 数据 。 开 及 者 可 以 通过 扫 一 扫 
图 1-35 所 示 的 数据 助手 小 程序 码 来 使 用 相关 功能 。 


图 1-34 开发 者 助手 小 程 厅 码 1-35 ”数据 助手 小 程 友 码 


自 小 程序 正式 发 布 一 年 多 来 ， 已 推出 58 万 个 微 信 小 程序 。 目 前 小 程序 的 日 活跃 账户 超 
过 1.7 亿 个 ， 己 经 有 不 少 团队 拿 到 千 万 甚至 上 亿 元 的 融资 。 近 日 ， 广 发 证 券 发 布 了 关于 腾讯 
小 程序 的 投资 价值 分 析 报 告 ， 估 算 公司 估 值 为 6230 亿美 元 ， 商 业 服 务 类 微 信 小 程序 获得 了 
500 亿美 元 的 估 值 。 可 以 想象 ， 作 为 微 信 内 部 抱 以 了 好 大 期 望 的 项 目 ， 在 新 零售 大 潮 下 ， 做 信 
小 程序 极 有 可 能 像 当初 的 App 一 样 重 塑 人 们 的 线 上 体验 。 


本 半 和 站 先 讲解 如 何 创建 第 一 个 小 程序 ， 包 括 新 建 项 目 、 真 机 预 宽 和 调试 、 代 码 提交 等 内 
容 ; 和 者 构 ; 最 后 介绍 微 信 开发 者 工具 的 布局 和 基本 功能 


关 生 小 程序 快速 启动 模板 的 创建 方法 ， 

了 解 小 程序 的 目录 结构 和 文件 类 型 

掌握 小 程序 主体 和 页 面 JSON 文件 的 属性 配置 
掌握 开 发 者 工具 的 模拟 器 、 编 辑 器 和 调试 器 的 使 用 。 


本 节 使 用 微 信 web 开发 者 工具 创建 第 一 个 微 信 小 程序 。 
2.1.1 ”新建 项 目 
双击 微 信 web 开发 者 工具 图 标 , 管理 员 或 开发 者 使 用 微 信 扫描 二 维 码 后 


进入 东单 界面 。 然 后 单 击 祭 单 中 的 “小 程序 项 目 ” 选 项 ， 进 入 小 程序 项 目 管 视频 讲解 
理 页 面 ， 如 图 2-1 所 示 。 


二 小 程序 项 目 管理 


小 程序 项 目 


编辑 、 调 试 小 程序 


微 信 开 奴 者 工具 


项 目 目录 


AppID 


公众 号 网 页 项 目 项 目 和 名称 


(a) 选择 小 程序 项 目 Cb) 小 程序 项 目 管理 页 面 
图 2-1 新 建 小 程序 项 目 
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此 时 ， 开 发 者 依次 填写 项 目 目 录 、AppID 和 项 目 名 称 就 可 以 新 建 一 个 小 程序 项 目 了 。 填 
写 的 注意 事项 如 下 。 

。 项 目 目录 : 项 目 文件 存放 的 路 径 地 址 ,可 以 单 击 输入 框 右 侧 的 策 头 按钮 在 计算 机 盘 符 

中 选择 指定 的 目录 地 址 。 

。 AppID: 官 理 员 在 微 信 公众 平台 上 注册 的 小 程序 ID。 

。 项 目 名 称 : 由 开发 者 目 定 义 一 个 项 目 名 称 ,该 名 称 不 会 影响 小 程序 被 用 户 看 到 的 名 字 。 

小 程序 的 AppID 可 以 登录 做 信人 公众 平台 (https://mp.weixin.qq.com) 但 看 ， 有 具体 但 看 方 
法 是 单 击 左 侧 的 “设置 ”选项 ， 在 “开发 设置 ”面板 中 查看 “开发 者 ID” 标 题 下 方 的 AppID 
(小 程序 ID)， 如 图 2.2 所 示 。 


入 8 。” 微 信 公众 平台 | 小 程序 


价 首页 
> 本 设置 发 1 : 接口 设置 开发 者 工具 


义 


Appsecretf 小 程序 密 钥 ) 


A ©® 


服务 器 域名 


图 2-2 查看 小 程序 ID 


将 查看 到 的 小 程序 ID 复制 并 粘贴 到 图 2-1 (b) 所 示 的 AppID 输入 框 中 ， 填 完 以 后 的 效 
朱 如 图 2-3 所 示 。 


小 程序 项 目 管理 


小 程序 项 目 


编辑 、 调 试 小 程序 


项 目 目录 


AppID | wx 人 EN 人 8 
若 无 Appid 可 注册 或 体验 ;小 程序 / 小 游戏 


项 日 色 条 Ml yDemo 
建立 普通 快速 启动 模板 


图 2-3 小 程 友 项 目 填 写 效 果 示 意图 


微 信 小 程序 开发 零 基础 入 门 {2 


AppID 必须 填 实 际 的 小 程序 驴 ,， 否则 部 分 功能 将 无 法 使 用 。 如 果 开 发 者 暂时 条 件 受 限 无 
法 注册 申请 小 程序 ID， 可 以 选择 AppID 输入 杠 下 方 的 体验 小 程序 ， 此 时 也 可 以 在 开发 者 工 
具 中 进行 开 友 ， 但 无 法 上 机 预 宛 。 

如 朵 项 目 目录 选择 的 是 一 个 空 日 文件 夹 ， 则 开 太 痢 工具 会 默认 匀 选 “建立 普 退 快速 局 动 
模板 ”， 该 选项 会 目 动 生成 代码 形成 一 个 简单 的 小 程序 效果 供 初学 者 入 门 学 习 。 

填写 完毕 后 单 击 “确定 ” 投 钮 完成 操作 ， 跳 村 到 开 肥 页 面 ， 如 图 2-4 所 示 。 


chapter02 - 微 信 开 改 者 工具 v1.02.1803210 
项 目 交 性 篇 办 工具 界面 设置 ”被 信 和 开 必 者 工具 


© ED es 小 程序 机 式 : 普通 编译 | 已 到 证 ps 
模拟 器 编辑 器 。 调试 器 编译 ”预览 。 运程 调试 《” 切 后 台 ”请 租 存 
iPhene & sa | TS -WiFi a Ty 


bk DD pages 
# [DO utils 
app.js 
{1} app.json 


二 二 二 二 和 WeChat 二 16:33 下 
Waechat “se 


ws 司 四 P .WNSG 


{1 project.config.json 


Hello Waorld 
Cefault lewels ™ 


而 面 跑 泾 ”pagess/inds,,.， 复制 打开 


图 2-4 ”小 程 夺 项 目 开 发 页 面 


该 图 中 左边 就 是 手机 预览 效果 图 ， 可 见 目 前 能 够 显示 出 一 个 “获取 头像 昵称 ”按钮 和 一 
个 “Hello World” 文 本 ， 这 与 手机 运行 的 效果 完全 相同 。 
用 户 可 以 直接 在 PC 端 用 | 手机 屏 1 如 图 2-5 所 示 。 


重 剖 二 重量 VEChat A 16:29 


Vechat 


代码 小 实验 申请 获得 以 下 权限 


二 也 和 你 的 公开 信息 (【 眠 称 ， 法 昼 等 ) 


用 鼠标 元 键 单 击 此 控 守 


Hello World Hello World 


Ca) 鼠标 模拟 手指 单 击 按钮 。”” ”(b) 单 击 允 许 微 信 授 权 Cc) 最 终 显示 效果 
图 2-5 ”小 程序 项 目 运 行 效果 
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在 图 2-5 中 , 图 (a) 显示 的 古 使 用 鼠标 单 击 来 模拟 手指 在 手机 屏 右 上 触摸 的 效果 ; 图 (b) 
为 单 击 之 后 弹出 的 微 信 授权 信息 ， 只 有 单 击 “允许 ” 才 可 以 获得 数据 ; 图 (c) 为 最 终 显 示 效 
末 ， 由 该 图 可 见 小 程序 项 目 己 经 成 功 地 获取 了 开 有 友 者 的 头像 和 昵称 信息 。 


2.1.2 ” 真 机 预 宛 和 调试 


贺 真 机 预览 
除了 可 以 在 PC 端 使 用 鼠标 模拟 手机 触 屏 的 单 击 效果 以 外 ， 还 可 以 直接 在 真 机 上 进行 程 
序 预览 。 单 击 “ 预 览 ” 按 钮 ， 即 可 自动 生成 一 个 预览 专用 二 维 码 ， 如 图 2-6 所 示 。 


chapter02 - 微 信 开发 者 工具 v1.02.1803210 


项 目 文件 蝙 加 工具 界面 设置 ” 微 信 开发 者 工具 1, 单 击 “预览 ”按钮 


Ey EE EE 小 程序 模 式 : 普通 病 译 
模 相 器。 筷 幅 器” 调 述 器 

iPhone 6 ww 75% ww | VIF 十 总 

# [pages 


Wiechat ， 
人 k [I utils 


J5 app.js 
{} app.json 
i |e tb 


{} projact.config.json 


今天 17:01 时 具 效 


复制 二 崔 码 


小 程序 开发 助手 ? 


Helle World index, js? :7 
.nfo”, timestoamp: 197259, target; fb}, currentrarget; ff-}, detaoil: tT.}} 


图 2-6 小 程序 项 目 生 成 预览 二 维 码 
此 时 用 手机 微 信 扫 摘 图 2-6 中 的 三 维 码 即 可 进行 真 机 测试 ， 如 图 2-7 所 示 。 


中 国电 信 全 下 二 二 39 re 
WeChat OO 


Hello Vorld 


图 2-7 小 程 友 项 目的 真 机 预 损 效果 


中 微 信 小 程序 开发 零 基 础 入 门 、 品 


由 图 2-7 可 见效 采 基 本 与 PC 站 的 预 虎 图 一 致 。 用 己 需 要 注意 ， 预 讽 所 用 的 二 维 但 不 和 是 水 从 
有 效 ， 要 注意 它 的 过 期 时 间 ， 一 有 旦 过 期 ， 需 要 重新 单 击 “ 预 贞 ” 投 钮 生成 新 的 预 砚 二 维 但 。 

团 真 机 调试 

真 机 预 虎 只 能 看 到 小 程序 页 面 效 末 ， 如 采 在 测试 过 程 中 需要 像 PC 病 一 梓 获 得 小 程序 的 
状态 数据 (例如 console 语句 输出 、 本 地 缓存 数据 变化 、 网 络 抓 包 等 )， 则 需要 进行 真 机 调试 。 

里 击 “ 远 程 调试 ”按钮 ， 即 可 目 动 生成 一 个 调试 专用 二 维 码 ， 如 图 2-8 所 示 。 
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Cy 


项 目 文件 编辑 工具 界面 设 曾 微 信 开发 者 工具 1 . 单 击 “远程 调试 ”… 
© EE ES ES 小 各 模式 : 二 二 -| ee Do (se-]» 
远程 调试 切 后 台 。” 清 缓 存 


模拟 器 ” 编辑 踢 ”调试 器 wes 
iPhone6 ~ 75% > WiFi ~ a a | 远程 调试 
k [ pages 
hl 5 1 全民 bi 四 k DO utils 
WeChat "- JS appjs 
{} app.ison 


wms app.WXSs 


{} project.config.json 


周 小 风 2. 微 信和 扫 一 扫 


令 天 17:06 时 失效 


等 待 设备 
[R | Console Sources Network 和 
© | top | | Filter Default levels ™ wi 


indew. js? [sm]:d7 


Hells Wiorld 
bb {type: "getuserinfo", timestamp: 197259, targets {f.}, currentTargets {.}, detail; 1.}} 


页 面 路 径 pagesyinde..， 复制 打开 场景 值 页 面 合 数 


图 2-8 ”小 程序 项 目 生 成 预 帘 二 维 码 
此 时 用 手机 微 信 扫描 图 2-8 中 的 二 维 码 即 可 进行 真 机 远程 调试 ， 如 图 2-9 所 示 。 


wi 中 国电 慷 只 下 午 4:44 全 了 此 19% 夺 站) 远程 调试 


一 器 


WeC hat 生硬 生 (se) COnscle SUTEES Memary Praftiler Wxm ApEData Storage . "Administrator "的 iPhone 


paBe> Styles | Dataset EP | 
上 已 连 汉 下 PF uiew class=" contaimer >,., .</ View ee iPhone 6s 
日 服务 器 正常 2 /paEe ] 王 行 系 统 is 114.1 
竺 确 认 : 吕 散 什 和 辣 本 6.7.1 
社 震 道 : 站 本 本 
二 而 库 顺 李 .9 


已 呈送 : 7 KB (0) 
巨 接 收 : #4 久 B (0) 性 运 怀 时 101mms 
Wi-Fi 


seEnd cmd=10068, seq=(16) 


疙 扣 对 =100B, eq=(17 


md=10068, sed=(18) 


cmd=10068, seyg=(19, 


司 用 工具 嫩 的 Storage 
不 校 验 音 法 域名，web- 
View r 业务 域名 ) 、TLS 版 
本 以 及 HTTPS 证 书 


结束 调试 


(a) 手机 调试 (b) PC 端 调试 器 
2-9 ”小 程序 项 目的 远程 调试 
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手机 调试 界面 会 比 真 机 预览 多 出 一 个 译 窗 ， 该 序 窗 会 显示 与 PC 疹 的 通信 状态 。 在 调试 
过 程 中 手机 闯 的 任何 操作 都 可 以 在 PC 疹 调 试 亏 中 同步 进行 查看 。 


2.1.3 ”代码 的 提交 


上 传代 码 

预览 只 能 由 开发 者 测试 小 程序 的 性 能 和 表现 ， 如 果 希 望 更 多 人 使 用 小 程序 ， 需 要 进行 代 
码 的 上 传 。 注意 , 只 有 上 传 后 的 代码 才 可 以 由 管理 员 进 一 步 选 择 发 布 为 体验 版 本 或 正式 版 本 。 

首先 需要 将 代码 上 传 到 小 程序 的 后 台 管理 端 。 单 击 开发 者 工具 顶端 的 “上 传 ”按钮 准备 
上 传代 码 ， 具 体操 作 如 图 2-10 所 示 。 
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LE 多 | 
远程 调试 。 切 后 台 。 清 缓存 


上 传 成 功 后 ， 需 要 联系 管理 员 在 小 程序 管理 
A 一: 单 击 “ 确 定 ” FE 背 十 “上 上 售 


2-10 上 传代 码 示 意图 


单 击 “ 确 定 ” 投 钮 之 后 ， 会 出 现 新 的 表单 要 求 开 发 者 填写 目 定 义 的 版 本 号 和 项 目 备 注 ， 
如 图 2-11 所 示 。 这 两 小 字段 是 为 了 方便 管理 员 检 租 版 本 而 使 用 的 。 


版 本 号 。 v1.2.0 
仅 限 字母 、 数 子 、. 


项 目 备注 “该 备注 主要 是 给 管理 员 看 的 ， 用 户 不 会 看 到 


取消 ”上传 


2-11 版 本 与 与 项 目 备注 


上 传 成 功 后 束 可 以 登录 小 程序 官 理 后 台 ， 单 击 “ 开 友 官 理 ” 选 项 ， 在 开 友 官 理 面 板 中 看 
到 刚才 提交 的 版 本 ， 如 图 2-12 所 示 。 


2018-08-25 16:10:00 


该 备注 主要 是 给 管理 员 看 的 ， 用 户 不 会 看 到 


图 2-12 ”开发 版 本 
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同一 个 小 程序 允许 同时 有 多 名 开发 者 提交 自己 的 最 新 开发 版 本 ， 管 理 员 最 终 只 能 选择 其 
中 一 份 进一步 提交 为 体验 版 或 线 上 版 。 

提交 体验 

管理 员 可 以 将 开发 版 本 提交 为 体验 版 ， 体 验 版 目前 最 多 可 以 供 15 名 体验 者 使 用 。 单 击 
“提交 审核 ”按钮 右边 的 向 下 箭头 按钮 ， 选 择 “ 选 为 体验 版 本 ”选项 ， 如 图 2-13 所 示 。 


开 上 友 服 本 


版 本 号 。 开发 者 属于 虽 
V1.2.0 提交 时 间 2018-08-25 16:10:00 


撞 述 该 备注 主要 是 给 管理 员 看 的 ， 用 户 不 会 看 到 


2-13 小 程序 的 开发 版 本 


体验 版 无 须 经 过 审核 ， 选 中 选项 即 可 和 完成， 已 经 转换 成 功 的 体验 版 如 图 2-14 所 示 。 


提交 时 间 2018-06-26 17:05:00 


局 I 本色 在 2018/6/26 下 午 503:35 提交 上 传 


2-14 “小 程序 的 体验 版 本 


单 击 体验 版 的 版 本 号 下 方 的 按钮 会 出 现 一 个 二 维 码 ， 有 具有 体验 者 权限 的 用 户 通 过 手机 微 
信 扫 一 扫 束 可 以 使 用 体验 版 了 。 体 验 版 也 可 以 继续 单 击 “ 提 交 审 核 ” 按 钮 提交 为 正式 的 线 上 
版 本 ， 但 是 需要 经 过 审核 。 
图 提交 审核 
管理 员 可 以 将 开 上 友 版 或 体验 厂 进 一 步 提 交 审 核 ， 通 过 审核 后 的 版 本 将 成 为 正式 的 线 
pa 该 版 本 没有 权限 限制 ， 所 有 微 信 用户 都 可 以 使 用 。 正 式 发 布 的 线 上 版 本 如 图 2-15 
所 示 。 


膨 * 
2018-06-12 18:17:00 


月 aa 在 2018/6/12 上 午 12:12:42 提交 上 传 


2-15 小 程序 的 线 上 版 本 


2.1.4 小 程序 的 版 本 
小 程序 根据 项 目 阶 段 分 为 开发 测试 、 审 核 过 程 和 最 终 发 布 ， 如 图 2-16 所 示 。 
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开发 测试 


2-16 小 程序 项 目 阶段 示意 图 


在 不 同 阶段 小 程序 的 版 本 主要 有 开发 版 本 、 体 验 版 本 、 审 核 中 版 本 和 线 上 版 本 。 

开发 版 本 

使 用 开发 者 工具 可 以 将 代码 上 传 到 开发 版 本 中 。 开 发 版 本 只 保留 每 位 开发 者 最 新 的 一 份 
上 传代 码 ， 该 版 本 只 有 开发 者 权限 用 户 可 以 预览 、 测 试 。 开 发 版 本 可 以 删除 ， 不 影响 线 上 版 
本 和 审核 中 版 本 的 代码 。 开 发 版 可 以 由 管理 员 继续 提交 为 体验 版 或 审核 中 版 本 。 

体验 版 本 

开发 版 可 以 由 管理 员 继续 提交 为 体验 版 ， 该 版 本 无 须 审核 且 只 有 体验 者 权限 用 户 可 以 使 
用 ， 其 他 用 户 无 法 打开 。 该 版 本 主要 用 于 正式 上 线 前 的 测试 体验 。 

审核 中 版 本 

开发 版 全 部 完成 后 可 以 由 管理 员 正 式 提交 上 线 。 小 程序 正式 上 线 前 的 待 审核 状态 称 为 审 
核 中 版 本 ， 同 一 个 小 程序 的 所 有 开发 版 本 只 能 有 一 份 处 于 此 状态 。 该 版 本 可 在 更 新 代码 后 重 
新 提交 审核 ， 在 等 待 审核 的 过 程 中 不 影响 现 有 正式 版 本 的 使 用 。 

线 上 版 本 

该 版 本 是 审核 通过 后 的 版 本 ， 所 有 微 信用 户 都 可 以 查看 和 使 用 。 如 果 有 新 上 传 的 代码 重 
新 被 审核 通过 ， 该 版 本 将 被 覆盖 更 新 。 


小 程序 的 目录 结构 主要 包含 项 目 配 置 文件 、 主 体 文件 、 页 面 文件 和 其 他 文件 。 本 节 将 基 
于 2.1 贡 创 建 的 第 一 个 小 程序 项 目 对 代码 文件 的 构成 展开 分 析 。 


2.2.1 项 目 配置 文件 
每 个 小 程序 在 新 建 时 都 会 自动 生成 一 个 项 目 配置 文件 project.configjson， 该 文件 直接 位 


于 项 目 根 目 录 下 , 如 图 2-17 所 示 。 其 内 部 代码 可 用 来 定义 小 程序 的 项 目 名 称 、AppDD 等 内 容 ， 
如 图 2-18 所 示 。 


了 微 信 小 程序 开发 零 基 础 入 门 所 jy 


project.contig json 其 


1 
"description": "项 目 配置 文件 。"， 
"settine": { 
"Urlcheck": true, 
"es6": true, 
"postcss": true, 
"minified": true, 
"newFeature”: true 
二 }, 
<> index.wxml "compileType": "miniprogram", 
"libVersion™”: "1.9.1", 
"appid"”: "wx 有 
"projectname": “MwDeme”， 
"isGameTourist": false, 
"condition": { 
"search": { 


logs.jSon "current": -1, 
pe i "list":; [] 


<> logs.wxml }; 
“conversation": 
wxss IOgS.WXSss 2: | - 
v [SS utils 2: ]; 
24 "game": { 
JS util.js 2 "currentL": 
"list": [] 


卢 


Y SS pages 


Vv index 


[| 


Js index.js 


wxss INdex.wXxss 
v [SS logs 
JS logs.js 


Js app.js }， 
s "miniprogram": 
{} app.json Mer < 
由 条 可 ot "list": [] 
wxss aDp.WXSS 


{} project.config.json 


图 2-17 项 目 配置 文件 project.config.json 的 位 置 2-18 ”项 目 配 置 文件 project.config.json 的 代码 


2.2.2 主体 文件 
小 程序 主体 文件 同样 直接 位 于 项 目 根 目录 下 ， 如 图 2-19 所 示 。 


v [SS pages 
v (SS index 
J5 index.js 
<> Index.wxml 
wxss indeXx.WXSS 
v [DS logs 
J5 logs.js 
{} logs.json 
<> logs.Wwxml 
wxss |OgS.WXSS 
vv [SS utils 
JS util.js 
JS app.js 
{} app.json 


wxss app.Wxss 


{} project.config.json 


2-19 app 系列 文件 的 位 置 
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由 图 2-19 可 见 主体 文件 名 称 均 为 app， 根 据 后 级 名 不 同 分 为 3 种 撩 型 。 

。 app.json: 必 填 文件 ， 用 于 摘 述 小 程序 的 公共 配置 。 

。 app.js: 必 填 文件 ， 用 于 插 述 小 程序 的 整体 逻辑 。 

。 app-wxss: 可 选 文件 ， 小 程序 公共 样式 表 。 

appJjson 

app.json 文件 是 小 程序 的 全 局 配置 文件 ， 主 要 包含 了 小 程序 所 有 页 面 的 路 径 地 址 、 导 航 
栏 样式 等 。 当 前 该 文件 的 内 部 代码 如 图 2-20 所 示 。 


app.Json 
{ 
"pages":[ 
"pages/index/index", 
“PaEes/ logs/ logs 


"backeroundTextStyle":"]light", 
"navigationBarBackgroundColor™": "#fff",， 
"navigationBarTitleText": "WeChat", 
"navieationBarTextstyle":"black" 


图 2-20 全 局 配置 文件 app.json 的 代码 


由 图 2-20 可 见 ， 本 次 小 程 厅 项 目 主要 包含 了 pages 和 window 两 个 属性 。 事 实 上 ， 除 了 
pages 和 window 以 外 ，app.json 还 可 以 配置 tabBar、networkTimeout 及 debueg 等 属性 ， 这 些 
属性 的 具体 说 明 如 表 2-1 所 示 。 


表 2-1 全 局 配置 文件 app.json 的 属性 


居住 | 类 型 清二 


必 填 属性 ， 用 于 记录 小 程序 所 有 页 面 的 路 径 地 址 。 其 中 如 果 有 多 个 页 
i 面 地址 ， 第 一 个 将 默认 为 小 程序 的 初始 页 面 
本 到 可 选 属性 ， 用 于 设置 页 面 的 窗口 表现 ， 例 如 导航 栏 的 背景 颜色 、 标 是 
文字 内 容 以 及 文字 颜色 等 
tabBar 可 选 属性 ， 用 于 设置 页 面 底 部 tab 工具 条 的 表现 
networkTimeout 可 选 属性 ， 用 于 设置 各 种 网 络 请 求 的 超时 时 间 
debug Boolean 可 选 属 性 ， 用 于 设置 古人 否 开 局 调试 模式 
1 ) pages 属性 


pages 属性 对 应 的 值 是 数组 形式 ， 数 组 的 每 一 项 都 是 以 字符 串 wy ea pi 的 路 
径 地 址 。 例 如 之 前 图 2-20 中 pages 属性 的 相关 代 但 束 表 示 当 前 共有 两 个 页 面 ， 分 别 是 Index 
和 log 页 面 ， 并 且 其 中 的 index 页 面 被 默认 为 小 程序 的 初始 页 面 。 

由 于 默认 数组 中 的 第 一 个 元 素 就 是 小 程序 的 初始 页 面 ， 开 发 者 也 可 以 临时 手动 调整 数组 
中 元 系 的 顺 厅 ， 以 便 快速 查看 不 同 页 面 的 模拟 占 预 多 效果 。 

如 采 新 建 页 面 ，app.json 中 的 pages 属性 会 目 动 更 新 代码 , 将 新 增 页 面 的 路 径 记 录 到 数组 
中 的 最 后 一 行 。 需 要 注意 的 是 ， 如 果 对 页 面 进行 删除 或 者 在 硬盘 中 直接 添加 新 页 面 ， 则 不 会 
触发 代码 目 动 更 新 效果 ， 而 需要 手动 修改 app.json 中 的 pages 属性 值 。 
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2) window 属性 
window 属性 对 应 的 值 是 对 象形 式 ， 其 中 包括 了 小 程序 页 面 项 端 导 航 栏 的 青 景 闫 色 、 标 
题 文字 内 容 以 及 文字 颜色 等 属性 ， 具 体 可 以 包含 的 对 象 属性 如 表 2-2 所 示 。 
表 2-2 app.json 文件 中 的 window 属性 值 


属性 描述 


BackeroundColor 


于 航 栏 标题 颜色 ， 默 认 值 表示 白色 ， 只 能 是 
0 和 默认 值 表 示 白 色 ， 该 属性 值 只 能 是 


White 或 black 
navigationBarTitleText | Saing | | 导航 栏 标题 文字 内 容 ， 默 认为 无 文字 内 容 
导航 栏 样式 ， 只 支持 default 或 custom， 其 中 custom 用 
navigationStyle String 于 目 定 义 叶 航 栏 内 容 , 只 保留 右上 和 角 的 小 图 标 ( 微 信和 版 
本 6.6.0 以 上 支持 此 功能 ) 
backeroundColor HexColor | ytfr 窗口 的 背景 闫 色 ， 上 默认 值 表示 日 色 ， 也 可 以 简写 为 #fff 


backgroundTextStyle ee 设 二 下 拉 加 载 的 样式 ， 该 属性 值 只 能 是 dark 或 light 
cat 顶部 窗口 的 背景 颜色 ,只 有 iOS 有 效 ( 微 信 版 本 6.5.16 
backeroundColorTop #11 机 


以 上 文 持 此 功能 ) 
底部 窗口 的 背景 颜色 ， 只 有 iOS 有 效 〈 微 信 版 本 6.5.16 
backeroundColorBottom | String 以 上 支持 此 功能 ) 


enablePullDownRefresh 是 否 开局 下 拉 刷 新 功能 


有 页 面 上 拉 触 底 事 件 触 上 友 时 距 页 面 底部 的 距离 , 单位 为 像 
onReachBottomDlstance | Number $0 素 (px) 


注意 : 标记 类 型 为 HexColor 的 属性 值 只 支持 十 六 进 制 颜色 表示 方式 。 例 如 #Ef0000 表 
示 红 色 ， 也 可 简写 为 #00， 并 且 大 小 写 不 限 。 


这 里 不 妨 对 app.json 进行 简 时 修改， 修改 后 的 代 人 码 如 图 2-21 所 示 。 


app.json x 
{ 

"pages":[ 
"pages/index/index", 
“pages/logs/logs”™ 

]， 


"window™":{ 


"backeroundTextstyle":"light", 
"navigationBarBackgroundColor™”: "#60", 
"navigationBarTitleText": "测试 "， 
"navigationBarTextStyle™":"white" 
} 
} 


图 2-21 小 程 夺 全 局 配置 文件 app.json 的 代码 


对 比 原 和 完 的 代码 ， 对 修改 内 容 议 明 如 下 。 

。 第 8 行 : 将 导航 栏 背景 颜色 从 日 色 改 为 红色 (#f00)。 

。 第 9 行 : 将 守山 柱 文 池内 容 从 “WeChat” 改 为 “测试 ”。 
。 第 10 行 : 将 导航 栏 文字 颜色 从 黑色 改 为 日 色 (white)。 
修改 后 的 预 帘 效 果 如 图 2-22 所 示 。 
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Hello World 


图 2-22 ”修改 app.json 文件 中 的 window 属性 后 的 预 虎 图 


开发 者 可 以 根据 实际 需要 重新 修改 定义 window 属性 中 的 各 种 样式 效果 。 

3) tabBar 属性 

如 果 小 程序 是 一 个 多 tab 应 用 (客户 端 窗口 的 底部 有 tab 栏 可 以 切换 页 面 )， 可 以 通过 
tabBar 配置 项 指定 tab 柱 的 表现 ， 以 及 tab 切换 时 显示 的 对 应 页 面 。 

tabBar 的 属性 值 如 表 2-3 所 示 。 


表 2-3 app.json 文件 中 的 tabBar 属性 值 

属 性 描述 
color HexColor| 是 | | tab 上 的 文学 默认 闫 色 
selectedColor HexColor| 是 | | tab 上 的 文学 选中 时 的 颜色 
backeroundColor HexColor| 是 | | tab 的 背景 色 
borderStyle tabBar 上 边框 的 颜色 ， 仪 支持 black、white 
list Amay | 是 | |  _ tab 的 列表 
position tabBar 的 位 置 ， 仅 文 持 bottom、top 


其 中 ，list 接收 一 个 数组 ， 只 能 配置 最 少 两 个 、 最 多 5 个 tab。tab 按 数 组 的 顺 厅 排 厅 ， 每 
项 部 古 一 个 对 象 ， 其 属性 值 如 表 2 地 斯 未 


表 2-4 list 属性 值 
pagePath 7 本 页 面 路 径 ， 必 须 在 pages 中 先 定义 
text _String | 是 | tab 上 按钮 的 文字 
iconPath tac icon 大 小 限制 为 40KB， 建 议 尺 寸 为 81pxx81px， 不 文 持 


> 选中 时 的 图 标 路 径 ，icon 大 小 限制 为 40KB， 建 议 尺 寸 为 81pxx81px， 
ea | ” | 不 支持 网 络 图 片 
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注意 : 当 position 属性 值 为 top 时 IconPath 和 selectedIconPath 属性 无 效 ， 不 显示 图 标 。 
图 2-23 有 助 于 读者 更 好 地 理解 tabBar 和 list 属性 值 的 作用 区 域 。 
backgroundColor borderstyle 


IConPath 
selectedLIconPath 


英 页 地- selectedColor Bare 


图 2-23 tabBar 属性 值 的 对 应 关系 


iconPath 和 selectedIconPath 属性 不 是 必 填 内 容 ， 例 如 : 


| 

一 "tabBar™”: { 

2 人 

号 { 

二 "pagePath": "pages/index/index"™, 

6. "emtr 目 |= 

了 上 上， 

8 . { 

9 。 "pagePath": "pages/demo/demo", 

10. exc" "人 例 古 " 

11: } 

I ] 

ia } 

14. } 
上 述 代码 表示 声明 了 带 有 两 个 页 面 的 tabBar 效果 ，tab 文字 内 容 分 别 为 首页 和 例题 。 
4) networkTimeout 属性 
app.json 中 的 networkTimeout 属性 可 以 用 于 设置 人 各 类 网 络 请 求 的 超时 时 间 ， 其 属性 值 如 

表 2-5 所 示 。 


表 2-5 app.json 文件 中 的 networkTimeout 属性 值 
属 性 描述 
request wxX.TequestO 的 超时 时 间 ， 单 位 为 坚 秒 
connectSocket WwWX.connectSocketO 的 超时 时 间 ， 单 位 为 寞 秘 
UploadFile wxX.UploadFileO 的 超时 时 间 ， 单 位 为 坚 秘 
downloadFile wx.downloadFileO 的 超时 时 间 ， 单 位 为 坚 秒 


例如 : 


{ 
"networkTimeout™:1 
“downloadFile™: 5000 
} 


Cn 必 ui 请 


} 


上 述 代 人 码 表 示 香 新 规定 下 载 文 件 wx.downloadFile0 方 法 的 超时 时 间 为 5s。 
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5) debug 属性 

用 户 可 以 在 微 信 web 开发 者 工具 中 开局 debug 模式 。 在 开发 者 工具 的 控制 台面 板 中 调试 
信息 以 info 的 形式 给 出 ， 主 要 包括 Page 的 注册 、 页 面 路 由 、 数 据 更 新 、 事 件 触 友和 等 内 容 ， 
可 以 儿 助 开 友 者 快速 定位 一 些 弟 见 的 问题 。 

app.js 

app.js 文件 是 小 程序 的 全 局 逻辑 文件 ， 代 人 码 片 段 如 图 2-24 所 示 。 


js 
App({ 
onLaunch: function () { 
“7/ 展示 本 地 存储 能 力 
var logs = wx.getstoragesync("logs'") || [] 
logs.unshift(Date,.nowt()) 
Wx.setstoragesync('logs', logs) 


// 登录 
WX,. login({ 
| success: res => { 
// 发 送 res,code 到 后 台 换 取 openId，sessionKey，unionId 
上 
}) 
// 获取 用 户 信息 
Wx .EetSetting({ 
suUccess: res => 1{ 
if (res.authSetting['scope.userInfo"]) { 
// 已 经 授权 ， 可 以 直接 调用 getUserInfo 获取 头像 昵称 ， 不 会 弹 框 
WX . EetUserInfo({ 
sUCCess: res => 1 


this.globalData.userInfo = res.userInfo 


// 由 于 getUserInfo 是 网 络 请 求 ， 可 能 会 在 Page.onLoad 之 后 才 返 回 

/A 所 以 此 处 加 入 callback 以 防止 这 种 情况 发 生 

if (this.userInfoReadyCallback) { 
this.userInfoReadyCallback(res) 

} 


}， 
ElobalData: 1 
userInfo: null 
} 

}) 


图 2-24 appjs 文件 的 代码 片段 


省 略 app-js 中 具体 的 图 数 认 容 后 将 得 到 以 下 代 但 框 以 : 


1. ApPP (1{ 

2 onLaunch: Euncticon(ty {1}, 
人 globalData: 1{} 

2 


由 此 可 见 ， 所 有 内 容 都 写 在 AppO 函 数 内 部 ， 并 且 彼 此 之 间 用 逗号 隔 开 。AppO 函 数 的 用 
见 3.1.1 节 “ 注 册 程序 ”。 

app.wxss 

app.-wxss 文件 是 小 程序 的 全 局 样式 文件 ， 代 码 如 图 2-25 所 示 。 


法 


sj 微 信 小 程序 开发 零 基础 入 门 


/**app, wxss**/ 

.container 1{ 
height: 108%,; 
display: flex; 
flex-directijon: column ; 


align-items: center; 
JUustify-content: space-between ; 
padding: 2D0rpX 909; 

box-sizing: border-box 


2-25 app.Wxss 文件 的 代码 


app-wxss 文件 用 于 规定 所 有 页 面 都 可 用 的 样式 效 末 ， 语 法 格式 见 3.2.2 帮 “WXSS "。 该 
文件 是 可 选 文件 ， 如 果 没 有 全 局 样式 规定 ， 可 以 省 略 不 写 。 


2.2.3 页 面 文件 


小 程序 一 般 会 在 根 目录 下 创建 一 个 pages 文件 夹 用 于 保存 所 有 页 面 文件 ， 每 个 页 面 有 目 
己 独 立 的 二 级 目 孙 ， 如 图 2-26 所 示 。 


v [SS index 
Js index.js 
<> index.wxml 
wxss iNdex.WXSs 
[SS logs 
J5 logs.js 
{} logs.json 
<> logs.wxml 
wxss |DgS.WXSS 
了 [SS utils 
JS util.js 
JS app.js 
{} app.json 


wxss app.WXSs 


{} project.config.json 


2-26 ”pages 文件 夹 内 容 


由 图 2-26 可 见 ， 该 项 目 当前 由 index 和 logs 两 个 页 面 组 成 。 每 一 个 单独 的 页 面 基 本 上 由 
4 种 文件 构成 ， 即 wxml、wxss、js 和 json， 说 明 如 下 。 
。 wxml 文件 : 用 于 构建 当前 页 面 的 结构 ， 包 括 组 件 、 事 件 等 内 容 ， 用 户 最 终 看 到 的 页 
面 效 果 就 是 由 该 文件 显示 出 来 的 。 
。 wxss 文件 : 可 选 页 面 ， 用 于 设置 当前 页 面 的 样式 效果 ， 该 文件 规定 的 样式 会 履 芒 
app.wxss 全 局 样式 表 中 产生 冲突 的 规定 ， 但 不 会 影 啊 其 他 页 面 。 
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e。 js 文件 : 可 选 页 面 ， 用 于 设置 当前 页 面 的 逻辑 代码 。 
e json 文件 : 可 选 页 面 ， 用 来 重新 设置 app.json 中 window 属性 规定 的 内 容 ， 新 设置 的 
选项 只 会 显示 在 当前 页 面 上 ， 不 会 影响 其 他 页 面 。 


注意 : 为 了 方便 开发 者 减少 配置 项 ， 建 议 直 接 在 空白 页 面 文件 天 上 右 击 选择 “新 建 ”一 
Page， 这 样 可 以 一 次 性 创建 描述 页 面 的 这 4 种 文件 ， 且 它们 会 具有 相同 的 路 径 与 文件 名 。 


json 文件 的 可 用 属性 如 表 2-6 所 示 。 
表 2-6 json 文件 的 属性 


属 性 描述 
navigationBarBackgroundColor CE 导航 栏 背景 颜色 ， 例 如 #000000 
navigationBarTextStyle 导航 栏 标题 颜色 ， 仅 支持 black、white 
navigationBarTitleText Er 导航 栏 标题 文字 内 容 
backeroundColor HexColor | #8 窗口 的 背景 色 
backeroundTextStyle 下 拉 loading 的 样式 ， 仪 文 持 dark、light 
enablePullDownRefresh 是 否 全 局 开启 下 拉 刷 新 


页 面 上 拉 触 奔 事 件 触发 时 距 页 面 底部 的 距离 ， 


onReachBottomDlstance 
单位 为 px 
各 设置 为 tue， 则 页 面 整体 不 能 上 下 深 动 。 为 

disableScroll Boolean false 外 ， 访 项 只 在 页 面 配置 中 有 效 ， 无 法 在 app.json 
中 设置 

例如 : 

1. 1 

二 二 "navigationBarBackgroundColor™: "#f£ffffff", 

2 "navigqationBarTextSstvyle’: "Dlack', 

4. "navigationBarTitleText™: "这 是 新 标题 " 

a 


上 述 代 人 码 表 示 设 置 叶 航 栏 背景 闫 色 为 白色 、 守 册 柱 标题 颜色 为 黑色 ， 并 六 
新 为 “这 是 新 标题 ” 0 


导航 栏 标题 更 


注意 :页 面 的 JSON 文件 只 能 设置 与 window 相关 的 配置 项 ,以 决定 本 页 面 的 窗口 表现 ， 
所 以 无 须 像 app.json 那样 专门 写 window 属性 。 


2.2.4 其 他 文件 


除了 前 几 节 介绍 的 常用 文件 外 ， 小 程序 还 允许 用 户 自 定义 路 径 和 文件 名 创建 一 些 辅 助 文 
件 。 例 如 在 本 章 创 建 的 第 一 个 小 程序 项 目 中 utils 文件 夹 就 是 用 来 存放 公共 JS 文件 的 ， 如 
2-27 所 示 。 

该 文件 夹 中 的 utiljs 保存 了 一 些 公 共 JavaScript 代码 ， 可 以 被 其 他 页 面 的 JS 文件 引用 ， 
具体 的 引用 方式 见 3.1.4 三 “模块 化 ”。 

除 此 之 外 ， 开 发 者 还 可 以 自 定义 资源 文件 来 用 于 存放 其 他 文件 。 例 如 ， 在 根 目录 中 创建 
images 文件 夹 用 于 存放 图 片 等 ， 这 些 文件 夹 可 以 根据 实际 需要 自行 创建 。 


了 微 信 小 程序 开发 雯 基础 入 门 蕊 jy 


T 加 pages 

加 index 
J5 index.js 
<> index.wxml 
wxss index.WXSs 

. [SS logs 
J5 logs.js 
{} logs.json 
<> logs.wxml 


wxss IOgs.Wxss 


J5 app.js 
{} app.json 


wxss app.WXSS 


{} project.config.json 


2-27 “utils 文件 夹 


?2.3 ”开发 者 工具 的 介绍 


开 友 者 工具 主要 由 琳 蛙 柱 、 工 具 栏 、 模 拟 费 、 编 辑 贷 和 调试 右 5 个 部 分 组 成 ， 如 图 2-28 
所 示 。 


5hapterd2z - 微 信 开发 天 工具 v1.02,1803210 


1 
时 :COmtainer 冰 

入 haight: i188%; 

十 display; laxs; 

虽 w= Ltn LN 

外 aliEn- toms: center; 

| 于 justify-content: space-botween; 
| profectconsgJaon B padding: 206rpx B; 

| box=sizing: borderebox,; 
看 


编辑 絮 


Heallo World 


| to Default levels ™ 


| ke fea: “getuserinfa”, Timestonp: 197259, targat: fF, currenmtToargat: ft, tetatl: gk} 
下 


模拟 各 
调试 醒 


2-28 ” 微 信 web 开发 者 工具 的 页 面 布局 


2.3.1 菜单 栏 


菜单 栏 中 主要 包括 项 目 、 文 件 、 编 辑 、 工 具 、 界 面 、 设 置 和 微 信 开 发 者 工具 ， 它 们 的 下 
拉 菜 单 选项 如 图 2-29 所 示 。 
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设置 ” 微 信 开发 者 工具 


Ctrl 十 [ 


Ctrl+] 


格式 化 代码 Alt+Shift+F 


代码 上 移 一 行 Alt+ 向 上 箭头 
代码 下 移 一 行 Alt+ 向 下 季 头 
复制 并 向 上 粘贴 Alt+Shift+ 向 上 箭头 
复制 并 向 下 粘贴 Alt+Shift+ 向 下 箭头 


项 目 文件 编辑 工具 界面 设置 
新 建 项 目 Ctrl+shift+N 
打开 最 近 项 目 跳 转 到 文件 Chl+P 

跳 转 到 最 近 文 件 Ctrl+E 

上 一 个 洞 辑 器 Alt+Ctrl+ 向 左前 

下 一 个 编辑 器 。 ”Alt+Ctrl+ 向 右 箭 关 


文件 编辑 工具 界面 设置 
新 建 代码 片段 新 建文 件 ctrl+N 


前 阅 


导入 人 NB 忆 自 保存 Ctrl+5 
查看 所 有 项 目 保存 所 有 Ctrl+Shift+5 Ctrl+F 


Ctrl+Shift+F 


关闭 当前 项 目 Ctrl+Shift+W 关闭 文件 


Ctrl+Shift+R 


《a)“ 项 目 ” 沫 单 《b)“ 文 件 ” 沫 单 《c)“ 编 辑 ” 沫 单 


工具 界面 设置 微 信 开 发 者 工具 
Ctrl+B 


Ctrli+R 


Ctrl+Shift+P ww ”工具 栏 Ctrl+Shift+ 1 


Ctrl+Shift+U 


ww 
ww 

ww 目 学 移 Ctrl+Shift+M 
ww 调试 器 Ctrl+Shift+1 项 目 设 置 


Ce) “界面 ”菜单 (f) “设置 ”菜单 


微 信 开 发 者 工具 
切换 帐号 
关于 
检查 更 新 
开发 者 社区 


开发 者 文档 


更 换 开 发 模式 
退出 Ctrli+Q 


《g)“ 微 信 开 发 者 工具 ” 沫 单 
图 2-29 ”有 末 单 栏 的 二 级 选项 
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2.3.2 ”工具 栏 


左 侧 区 域 
工具 栏 的 左 侧 区 域 主要 包含 个 人 中 心 、 模 拟 器 、 编 辑 器 和 调试 器 ， 如 图 2-30 所 示 。 


ile) Bilis li 


模拟 器 。 编辑 器 调试 器 
图 2-30 工具 栏 的 左 侧 区 域 


具体 说 明 如 下 。 

。 个 人 中 心 : 账户 切换 和 消息 提醒 。 

。 模拟 器 : 单 击 切换 显示 /隐藏 模拟 器 面板 。 

。 编辑 器 : 单 击 切 换 显 示 / 隐 藏 编辑 器 面板 。 

。 调试 器 : 单 击 切换 显示 /隐藏 调试 器 面板 。 

中 间 区 域 

工具 栏 的 中 间 区 域 主要 包含 小 程序 模式 、 编 译 模式 、 编 译 、 预 览 、 远 程 调试 、 切 后 台 和 


消 缓存， 如 图 2-31 所 示 。 


小 程序 模式 普通 编译 hs ht XT > SS 
编译 预览” 远程 调试 。 切 后 台 清 缓 存 


2-31 工具 栏 的 中 国 区 域 


具体 说 明 如 下 。 
。 小 程序 模式 : 小 程序 模式 和 搜索 动态 页 模式 。 

。 编译 模式 ， 普通 模式 、 自 定义 编译 模式 和 二 维 码 编译 模式 。 

。 编译 : 重新 编译 小 程序 项 目 。 

。 预览 : 生成 二 维 码 进行 真 机 预览 。 

。 远程 调试 生成 二 维 码 进行 真 机 远程 调试 。 

。 切 后 台 : 可 以 切换 场景 值 。 

。 清 缓存 : 可 以 单独 或 同时 清除 数据 缓存 、 文 件 缓存 、 授 权 数 据 、 网 络 缓存 、 登 录 状态 。 
右 侧 区 域 

工具 栏 的 右 侧 区 域 主要 包含 上 传 、 测 试 、 腾 讯 云 和 详情 ， 如 图 2-32 所 示 。 


上 传 测试 腾讯 云 评 情 
2-32 工具 栏 的 右 侧 区 域 


具体 说 明 如 下 。 
。 上 传 : 将 代码 上 传 为 开发 版 本 。 
。 测试 : 每 24 小 时 可 以 申请 一 份 测试 报告 。 
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。 腾讯 云 : 小 程序 授权 的 腾讯 云 服 务 。 
。 详情 : 显示 项 目 设 置 、 域 名 信息 和 腾讯 云 状 态 。 


2.3.3 -模拟 大 


模拟 右面 板 可 以 切换 虚拟 手机 型 号 、 显 示 比 例 以 及 模拟 网 络 连 接 状 态 ， 如 图 2-33 所 示 。 


项 目 文件 编辑 工具 界面 设置 ” 微 信 开发 者 工具 项 目 文件 编 工具 界面 设 告 ” 微 信 开发 者 工具 项 目 文件 汽 粗 工具 界面 设置 微 信 开发 者 工具 


] Ff | 国 改作 
SY ED ED ES Sy EE ES ES SS EE ES ES 


模 羽 品 编辑 器 。 调试 器 模拟 器 。 编辑 器 。 调试 器 档 拟 器 编辑 器 ”调试 器 


iPhone & 入 了 5 多 -VIFI 
iPhone 5 320xX568 | DPr2 
iFhene 6 375X 667 |Dpr:2 
iPhene 6& Plus 414% 736 | Depr:3 
iPhone 7 375 x 667 | Deporz 
iPhone 7 Plus 414 x 736 | Bper:3 
iPhoneX 375 x 812|Dpr3 
Nexus 5 360 x 640 | Dpr:3 
Nexus Sx 411 x 731|Dpr2.625 
Mexus & 412 732|Dpr:3.5 
十 ” 自 定 尺 
Hello World 


iPhaone 6 ww 5 号 =“ VwiFi iPhene 6 * IS iFi 


TTTT WEICIat a 有 


4 三 


Offline 
获取 头像 昵称 


Hells Wearld Hello World 


(a) 手机 型 号 选择 (b) 显示 比例 选择 (c) 网 络 连接 状态 选择 


图 2-33 ”模拟 兹 的 相关 选项 


编辑 天 主要 包 合 项 目 完 攻 目录 结构 区 和 代码 区 ， 如 图 2-34 所 示 。 


SS index 
JS index.js 


加 站 多 名 


wess rpcdlex Wxss 
下 [SS logs 

JS logs.js 

{} logs.json 

过 logs wxml 


ws Iogs. Was 


» 加 utils 


JS app.js 


£1} app.json 
mss AP. WMSS 


{} project.config on 


3 


"paEges": [ 贡 团 代 娶 页 面 
"pages/index/index", 
"pagEes/ logs/ logEs" 


ES| 


"Window": 1 
"backeroundTextstyle™": "lieht"™, 
"navigationBarBackerourdCcolor™; "#1fff", 
"navieationBarTitleText": “WeCchat", 
"navigationBarTextstyle”: "black”" 


中 的 -wy 


图 2-34 ”编辑 怖 面板 布局 
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目录 结构 区 

在 目录 结构 区 中 可 以 单 击 左 上 角 的 “+” 号 添加 新 文件 ， 文 件 关 型 包括 目录 、Page、 
Component、JS、JSON、WXML、WXSS 和 WXS。 其 中 ，Page 有 帮助 开发 者 快速 创建 页 面 
所 需 的 全 套 文件 ， 即 在 同一 路 径 中 批量 生成 同名 的 WXML、WXSS、JS 及 JSON 文件 。 

下 代码 区 

re 里 击 代 人 码 右 上 角 的 “x” 与 可 以 关闭 当 前 代 公 

在 页 面 上 编辑 代码 还 可 以 实现 目 动 提示 。 这 里 以 编写 一 个 <view> 标 签 为 例 ， 如 图 2-35 

所 未 。 


<|1--pages/test/test ,Wxml--> 


video 


3 View 


: COVer-VIew 

: movable-view 
3 picker-view 
3 scroll-view 
= WEb-view 


图 2-35 ”代码 局 动 提 示 功 能 
由 图 2-35 可 见 ， 只 需要 输入 前 面 几 个 字母 ， 就 可 以 出 现 相 关 组 件 的 代码 提示 ， 此 时 用 键 
盘 方 回 键 选择 正确 的 内 容 ， 然 后 按 回 车 键 即 可 全 部 生成 。 
2.3.5 ”调试 可 
调试 名 可 以 在 PC 闫 预览 小 程序 或 在 手机 疾 调 试 小 程序 时 使 用 ， 用 于 实时 得 看 小 程序 运 


行 时 的 后 台 输 出 、 网 络 状况 、 数 据 存 储 等 内 容 的 变化 。 调 试 准 目前 主要 包含 了 9 个 面板 ， 可 
以 用 其 顶部 的 tab 栏 进行 切换 ， 如 图 2-36 所 示 。 


Console Sources Network Secuyrity Storage AppData Wxml Sensor Trace 


v Filter Default levels ™ 


图 2-36 调试 器 的 tab 栏 


Console 
Console 是 后 闫 控 制 台 , 在 小 程序 编译 或 运行 有 误 时 将 给 出 Warning 或 error 的 信息 提示 。 
例如 针 误 的 JS 文件 代码 导 致 编译 失败 时 ， 提 示 如 图 2-37 所 示 。 


[RK Console Sources Network Securty Audits Storage AppData Wxml Sensor Trace 


(YY | top v | Filter Default levels ™ 


@ pthirdscriptError 
sdk uncaught third Error 
module se J]s” is not defined 
Error: module ‘ BAPE mo Ea en J]s” ls not defined 
at i Chttp: 


Y sat Aug 25 2618 14:59:24 GMT+6866 (中 国标 准时 间 ) page 篇 详 钳 识 LX 
| 四 ppages/demo81/intro/intro.js 出 现 脚 本 错误 或 者 未 正确 调用 page() 


图 2-37 Console 控制 台 的 错误 提示 
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当然 可 以 由 开发 痢 目 行 在 JS 文件 中 使 用 console.log(" 目 定义 输出 内 容 ) 语 句 或 直接 在 控 


制 台 上 进行 文本 输出 ， 用 于 诊断 代码 的 执行 情况 和 数据 内 容 。 


例如 直接 在 控制 全 输入 console.log0 语 名 后 回 车 即 可 完成 输出 ， 效 果 如 图 2-38 所 示 。 


Console Sources Network Security Audits Storage AppData Wxml Sensor Trace 


| top 了 | Filter Default levels ™ 
> console.1og(' 欢迎 一 起 学 习 微 信 小 程序 ') 

欢迎 一 起 学 习 微 信 小 程序 

undefined 
> | 


图 2-38 ”Console 控制 台中 的 console.log() 语 句 


Sources 
Sources 面板 是 小 程序 的 资源 面板 ， 可 以 显示 本 地 和 云端 的 相关 资源 文件 ， 如 图 2-39 


所 示 。 


[x Console Sources Network Security Audits Storage AppData Wxml Sensor Trace 


Sources Content scripts » : 中 app.js * 
vO top @ source Map detected. 


YO 127.0.0.1:58810 lidefine( app.]Jjs ,， function(require, module, exports, win 
了 人 appservice 2|//# sourceMappingURL=data:application/json;charset=utf- 


> _dev bbB 


[= 


> MM pages 
本 appservice 
app.js 
TO (no domain) 


extensions::binding 


图 2-39 Sources 面板 


小 程序 在 代码 编写 完成 后 会 被 打包 成 一 个 完整 的 JavaScript 文件 运行 。 
Network 
Network 面板 在 小 程序 调用 网 络 API 时 用 于 记录 网 络 抓 包 数据 ， 如 图 2-40 所 示 。 


Netwark Security Audits Stoeradge AppData Waml Sensor Trace 
| Group by frame Preserve Iog Disablhe cache | Qfline Wothrottling ™ 
(Regex © Hide data URLs BD) xHR Js css Img Media Font Doe Ws Manifest Other 


10n ms 150 ms 200 ms 


‘Waterfall 0. D0 ms 


| ?word=apple /i | 


图 2-40 ”Network 面板 


Securlty 
Security 面板 是 小 程序 的 安全 面板 ， 当 发 生 了 网 络 请 求 时 记录 所 使 用 的 域名 来 源 是 否 安 


全 ， 如 图 2-41 所 示 。 


storage 
Storage 田 板 可 用 于 查看 当前 小 程序 的 缓存 数据 ， 如 图 2-42 所 示 。 


大 微 信 小 程序 开发 雯 基础 入 门 蕊 F 


四 


[K Console Sources 


OD Overvilew 


Main origin 
Reload to view details 
5ecure origins 


量 https://api.shanbay.com 


[x 
Key 


Console Sources Network 


Lsername 


password 


Network 


storage AppData Wxml Sensor Trace 


Security 


Securlty overview 


The security of this page is unknown. 


2-41 Security 面板 


Securty Audits Storage AppData Wxm|l Sensor Trace 


value 


"admin” 


"123456" 


2-42 Storage 面板 


在 测试 过 程 中 ， 开 发 者 可 以 手动 修改 该 面板 中 的 数据 值 。 


回 AppData 


AppData 面板 可 以 实时 碍 看 小 程序 页 面 JS 文件 中 data 数据 的 变化 ， 如 图 2-43 所 示 。 


Console Sources Network 


Tree ™ 


Security Audits storage AppData Wxml Sensor Trace 


vw pages/demo981/intro/intro {2} 


test : hellol 


_ webvjiewlId _: 


2 


图 2-43 AppData 面板 


在 测试 过 程 中 ， 开 肥 者 可 以 手动 修改 该 面板 中 的 数据 值 。 


Wxml 


Wxml 面板 是 小 程序 的 WXML 


代码 预览 面板 , 在 运行 小 程序 后 打开 该 面板 就 可 以 查看 当 


页 面 的 WXML 代码 内 容 和 对 应 的 广 染 样式 ， 如 图 2-44 所 示 。 


Console SOUrces Metwaork 


[w 
WW <page> 
<view class="container”> 
view class= demo A >A</vliew> 
<View class="demo B'»B</View> 
‘View class="demo C >»>C/View> 
/View> 
/page> 


8 Sensor 


Wxml 


- 


Styles | Dataset 


element,.style 1{ 

} 

.AT ./papes/demogl 
width: 188rpx; 


1Nntro/intro .wxss.. 


flex-erow: @; 


} 
Wxml 面板 


图 2-44 


Sensor 面板 用 于 模拟 手机 传感器 ， 在 PC 端 测试 时 可 以 手动 录入 传感器 数据 ， 例 如 地 理 
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位 置 经 纬度 、 加 速度 计 坐 标 等 ， 如 图 2-45 所 示 。 


[K Console Sources Network Security Audits Storage AppData Wxml Sensor “Trace 


Ceclocation | |enable 


Sq ga Latitude 

116.46 Longitude 

-1 speed 

65 Accuracy 

0 Altitude 

65 Vertical Accuracy 


65 Horizontal Accuracy 


Orientation 0 


-0.9563 


-0.29231 


图 2-45 ”Sensor 面板 


9| Trace 
Trace 面板 是 小 程序 的 调试 奶 中 面板， 目前 暂时 只 文 持 Android 手机 ， 如 图 2-46 所 示 。 


[e Console Scurces Network Security Storage AppData Wxml sensor Trace 


请 选择 Andraid 设备 


1, 请 确认 PC 上 已 安装 Android 调试 工具 ADB 
2. 请 确认 PC 上 已 经 安 著 Android 手机 的 驱动 


3. 请 确认 Amdre 上 手机 已 打开 USB 调试 闫 已 授 想 当前 
, 请 强 认 Andreid 手机 上 已 安装 微 信 6.5.10 以 上 客户 端 版 地 


2-46 Trace 面板 


小 程序 框架 


本 革 主 要 内 容 是 小 程序 框 染 ， 包 括 逻 辑 层 、 视 图 层 和 flex 模型 。 逻 辑 层 是 由 JavaScript 
编写 而 成 的 ， 视 图 层 由 WXML 和 WXSS 配合 组 件 构 成 ，flex 布局 可 以 确保 页 面 需要 适应 不 
a 恰当 的 位 置 。 


党报 注 册 程 序 和 页 面相 关 函数 的 用 法 ; 

掌握 页 面 路 由 的 方式 和 模块 化 的 用 法 ; 

掌握 WXML 的 数据 绑 定 、 列 表 / 条 件 泻 染 、 模 板 、 事 件 和 引用 ; 
掌握 WXSS 的 尺寸 单位 、 使 用 方式 和 选择 器 的 用 法 ; 


了 解 flex 布局 的 基本 概念 ; 
等 握 flex 布局 中 的 容器 属性 和 项 目 属性 。 


小 程序 开发 框架 的 远 辑 层 又 称 为 App Service， 是 由 JavaScript 编写 和 和 实现 的 。 开 发 者 
写 的 所 有 代码 最 后 将 被 打包 成 一 份 JavaScript， 并 在 小 程序 启动 的 时 候 运 行 ， 直 到 小 程序 被 

逻辑 层 的 主要 作用 是 处 理 数据 后 发 送 给 视图 层 泻 染 以 及 接收 视图 层 的 事件 反馈 。 

为 了 更 方便 地 进行 项 目 开 发 ， 小 程序 在 JavaScript 的 基础 上 进行 了 一 些 优化 ， 例 如 : 

(1) 新 增 AppOQ 和 Page0 方 法 ， 分 别 用 于 整个 应 用 程序 和 单独 页 面 的 注册 。 

(2) 新 增 getAppO0 和 getCurrentPages0 方 法 ， 分 别 用 于 获取 整个 应 用 实例 和 当前 页 面 
实例 。 

(3) 提供 丰富 的 微 信 原 生 API， 例 如 可 以 方便 地 获取 微 信用 户 信 息 、 本 地 存储 、 扫 一 扫 、 
微 信 支付 、 微 信 运 动 等 特殊 功能 

(4) 每 个 页 面具 有 独立 的 作用 域 ， 并 提供 模块 化 功能 。 

需要 注意 的 是 ， 由 于 框 杂 不 在 浏览 右 中 运行 ， 所 以 JavaScript 与 浏览 器 相关 的 一 些 功能 
无 法 使 用 ， 例 如 document、window 等 。 


3.1.1 注册 程序 


App() 方 法 
小 程序 通过 使 用 App(OBJECT) 方 法 进行 应 用 注册 ， 用 其 指定 小 程序 的 生命 周期 函数 。 
OBJECT 参数 如 表 3-1 所 示 。 


了 微 信 小 程序 开发 零 基础 入 站 


表 3-1 App() 方 法 的 OBJECT 参数 


属 性 备 注 
onLaunchO er 小 三 当 小 程序 初始 化 完成 时 触发 | 全 局 只 触发 1 次 
本 | 生命 周期 函数 一 监听 小 程 | 当 小 程序 启动 或 从 后 台 进 入 前 
Be mcaon | 序 的 显示 台 显示 时 触发 
| 生命 周期 函数 一 监听 小 程 | 当 小 程序 从 前 台 进入 后 台 隐 藏 
unctaon | 序 的 隐藏 时 触发 
onEmorD Fanetion | 全 HE rong 
onpageNotFound) 页 面 不 存在 图 数 ee 


开发 者 可 以 添加 自 定义 名 
其 他 自 定义 参数 |Any ”| 称 的 函数 或 数据 到 OBJECT 有 
参数 中 


注意 : App0 方 法 只 能 写 在 小 程序 根 目录 下 的 appjs 文 件 中 ， 并 且 只 能 注册 1 个 。 


用 户 可 以 使 用 微 信 web 开发 者 工具 在 空白 app js 文件 中 直接 输入 关键 词 app， 此 时 会 自 
动 出 现 提示 列表 ， 如 图 3-1 所 示 。 


function@ 


YY App 

"© AppoOptions 

* AppSshowOptions 

*o ShareAppMessageReturnObject 
Dm getApp 


3-1 app.js 的 代码 提示 列表 


默认 选择 提示 列表 中 的 第 一 项 ， 直 接 按 回 车 键 就 可 以 目 动 生成 市 有 生命 周期 全 套 函 数 的 
代 但 结构 ， 如 图 3-2 所 示 。 

事实 上 , App0 中 的 这 些 函 数 均 为 可 选 函 数 , 开发 者 可 以 根据 实际 需要 删除 其 中 的 部 分 函 
数 ， 或 保留 这 些 国 数 但 空 痢 不 填充 内 容 。 

第 12、19 行 注 释 语句 均 提 到 了 小 程序 后 台 和 前 台 的 概念 ， 有 具体 说 明 如 下 。 

。 小 程序 后 台 : 指 的 是 小 程序 没有 在 手机 当前 画面 显示 ， 但 是 并 没有 被 销毁 。 当 用 户 
单 击 左上 和 角 的 按钮 关闭 小 程序 或 者 按 设备 的 Home 键 离开 微 信 时 会 进入 后 台 运 行 
状态 。 

。 小 程序 前 台 : 指 的 是 小 程序 在 手机 当前 画面 被 使 用 。 当 用 户 再 次 打开 处 于 后 台 运 行 状 
态 的 小 程序 时 会 重新 进入 前 台 运 行 状态 。 


注意 : 只 有 当 小 程序 进入 后 台 一 定时 间或 者 系统 资源 占用 过 高 时 才 会 被 真正 地 销毁 。 
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app.js 本 
//app.js 
App (1{ 
了 说 
* 当 小 程序 初始 化 完成 时 ， 会 触发 onLaunch ( 全 局 只 触发 一 次 ) 


* 
onLaunch: function () { 


}, 
/4 
* 当 小 程序 启动 ， 或 从 后 台 进入 前 台 显 示 ， 会 触发 onShow 


4 
onshow: function (options) { 


}, 


/** 
* 当 小 程序 从 前 台 进 入 后 人 台 ， 会 触发 onHide 
*/ 


onHide: function () { 


}， 


ff 本 下 
* 当 小 程序 发 生 脚 本 错误 ， 或 者 api 调用 失败 时 ， 会 触 点 onError 并 带 上 错误 信息 
onError: function 《msE) { 


} 


图 3-2 app.js 目 动 生成 App() 代 码 


由 图 3-2 中 的 代码 可 见 ，onLaunchO、onShowO 和 onError0 方 法 在 触及 时 均 会 返回 参数 ， 
用 户 可 以 利用 这 些 参数 进行 状态 的 判断 与 处 理 。 其 中 ，onLaunch() 与 onShow0 方 法 返回 的 参 
数 名 称 完全 相同 ， 具 体 如 表 3-2 所 示 。 


表 3-2 onLaunch() 和 onShow() 方 法 返回 的 参数 


字 上段 说 明 
path 打开 小 程序 的 路 径 
query 打开 小 程序 的 query 
Scene Number 打开 小 程序 的 场 隶 
shareTicket String 小 程序 被 转 肥 时 会 生成 一 个 shareTicket, 打开 被 转 肥 的 小 程序 页 
面 可 以 获取 该 参数 
referrerInfo Object 当场 景 为 从 男 一 个 小 程序 /公众 写 /App 打开 时 返回 此 字段 
referrerInfo.applId 中 转 前 的 小 程序 /公众 号 /App 的 appId 
referrerInfo.extraData 跳 转 前 的 小 程序 传 来 的 数据 ， 当 scene=1037 或 1038 时 才 文 持 


支持 返回 referrerInfo.appld 的 场景 值 如 表 3-3 所 示 。 


表 3-3 支持 返回 referrerlnfo.appld 的 场景 


场 景 值 appld 信息 的 含义 


1020 公众 号 profile 页 的 相关 小 程序 列表 返回 来 源 公 众 号 appId 
1035 公众 号 自 定义 菜单 返回 来 源 公 众 号 appId 
1036 返回 来 源 应 用 appId 

1037 小 程序 打开 小 程序 返回 来 源 小 程 厅 appId 


1038 从 为 一 个 小 程序 返回 返回 来 源 小 程序 appId 


1043 会 众 号 模板 消息 返回 来 源 公众 号 appId 
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说 明 : 天 于 场景 值 的 更 多 介绍 ， 见 附 夭 。 
除了 图 数 外 ，App0 也 文 持 添 加 目 定义 的 全 局 变量 ， 示 例 代 码 如 下 : 


1. App(l 

2 globalData: I{ 

本 userInfo: null // 这 是 一 个 全 局 变量 
二 } 

= 


这 里 ， 全 局 变量 的 名 称 、 取 仁和 数 

onPageNotFound() 万 法 

当 需 要 打开 的 页 面 不 存在 时 ， 微 信和 客 己 新 会 有 一 个 原生 模板 页 面 提示 。 如 果 开 友 者 不 项 
望 跳 转 到 此 页 面 ， 想 目 行 处 理 ， 则 和 需 用 到 onPageNotFound0 方 法 。 

该 方法 从 基础 库 1.9.90 开始 文 持 , 低 版 本 十 要 做 薪 容 处 理 。 当 要 打开 的 页 面 并 不 存在 时 ， 
会 回调 这 个 方法 并 市 有 3 个 参数 ， 具 体 参 数 内 容 如 表 3-4 所 示 。 


表 3-4 onPageNotFound() 方 法 的 参数 
有 砚 
path 不 存在 页 面 的 路 径 
query 打开 不 存在 页 面 的 query 


”bp 。。| ,| 是 否 为 本 次 启动 的 首 个 页 面 〈 例 如 从 分 享 等 入 口 进来 ， 首 个 页 面 是 开发 者 配置 
7 8 | “209 ean | 的 分 享 页 面 ) 


量 都 可 以 由 开发 者 目 定 义 。 


onPageNotFound0 方 法 的 示例 代码 如 下 : 


APP (1 
onPageNotEound: function(res) 1{ 
/7 小 程序 打开 的 页面 不 存在 时 需要 执行 的 代码 
WX .redirectTor(t 
url: 'pages/test/test' 
}) ” // 如 果 是 tabBar 贝 面 ， 请 使 用 wx .switchTab 
} 


J] 


: 1}) 


上 述 代 码 可 以 用 指定 的 页 面 代替 原生 模板 页 面 。 需 要 注意 的 是 ， 如 果 onPageNotFound0O 
调 中 又 重 定向 到 男 一 个 不 存在 的 页 面 ， 将 重 定 疝 到 微 信 自 带 的 原生 模板 页 面 提示 页 面 不 存 
在 ， 并 且 不 再 触发 onPageNotFoundO 监 听 。 

getApp() 方 法 

在 小 程序 的 其 他 JS 文件 中 均 可 以 使 用 全 局 的 getApp0 方 法 获取 小 程序 实例 。 

例如 ，testjs， 示 例 代 人 码 如 下 : 


. Var app=getApp () 
2. Console.log (app.globalData.userIinfo) 


上 


此 时 , 就 可 以 在 testjs 页 面 获得 app.js 中 保存 的 公共 数据 , 并 在 console 控制 台 打 印 输出 。 
青 要 注意 的 是 ,用户 不 可 以 在 appJs 的 AppO 力 数 认 部 调用 getApp0 方 法 , 可 以 直接 使 用 
关键 字 this 代 蔡 。 例 如 : 


1. App (1 
2 globalData: { 


是 userInfo: null  // 这 是 一 个 全 局 变量 
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i } 

2 onLoad:function (OPtLIOnS) | 

6 。 Console.log(this.globalData.userInfo) / /使 用 this 关键 字 获得 全 局 变量 
} 

8 . 1) 


上 述 代 码 就 在 onLoad0 方 法 中 直接 使 用 了 this 关键 字 获 得 全 局 变量 。 
3.1.2 ”注册 页 和 面 


小 程序 在 每 个 页 面 JS 文件 中 通过 使 用 Page(OBJECT) 方 法 进行 页 面 注 册 ， 该 方法 可 以 用 
于 指定 小 程序 页 面 的 生命 周期 函数 。Page0 方 法 的 OBJECT 参数 如 表 3-5 所 示 。 


表 3-5 ”Page() 方 法 的 OBJECT 参数 


属 性 说 明 
data 页 面 的 初始 数据 
onLoadO 生 合 周期 函数 一 一 监听 页 面 的 加 载 
onReadyO Function | 生 合 周 期 冰 数 一 一 监听 页 面 初 次 痊 染 完成 
onShowO 生命 周期 函数 一 一 监听 页 面 的 显示 
onHide0 生命 周期 函数 一 一 监听 页 面 的 隐藏 
onUnloadO) 生命 周期 函数 一 一 监听 页 面 的 凶 载 
onPullDownRefresh() 页 和 面相 天 事件 处 理 函 数 一 一 监听 用 户 下 拉动 作 


onReachBottomO) Function | 负面 上 拉 触 压 事 件 的 处 理 函 数 


onShareAppMessage() 用 户 单 击 右 上 角 转 友 

onPageScroll0 页 面 竣 动 触 友 事件 的 处 理 函 数 

onTabItemTapO Function | 和 看 当 前 是 tab 页 ， 单 击 tab 时 触发 

其 他 开发 者 可 以 添加 任意 函数 或 数据 到 OBJECT 参数 中 ， 在 页 面 的 函数 中 
用 this 可 以 访问 


注意 : Page0 方 法 只 能 写 在 小 程序 每 个 页 面 对 应 的 JS 文件 中 ， 并 且 每 个 页 面 只 能 注册 
Be 


在 微 信 web 开发 者 工具 中 新 建 页 和 面 时 会 自动 生成 页 面 JS 文件 的 Page0 方 法 。 这 里 以 test 
页 面 为 例 ， 创 建 完 成 后 testjs 的 代码 如 下 : 


1. // pages/test/test.js 

7. Page tl 

3. 1 本 来 

4 : * 页 面 的 初始 数据 

二 */ 

6. data: 上 

Pie 

8. 上 7 

9 . 本 训 

10. * 生命 周期 图 数 一 一 监听 页 面 的 加 载 
11. */ 

1l2. onLoad: function(options} { 
I 

14. jj}, 

15. /##* 

16. * 生命 周期 冰 数 一 一 监听 页 面 初次 演 染 完成 
下 */ 


18. onReady: function() { 
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1 

20- 上 

21. /** 

22. * 生命 周期 函数 一 一 监听 页 面 的 显示 
过 了 3- */ 

24. onsShow: function(}) { 

Le 

Pn 上 7 

27A。 /本 让 

28. * 生命 周期 函数 一 一 监听 页 面 的 隐藏 
29., */ 

30. onHide: function() { 

i 

232 "Is 

33 。 /** 

34. * 生命 周期 函数 一 一 监听 页 面 的 凶 载 
i */ 

36- onUnload: function() { 

31 

38. 上 

39 。 /** 

40. * 页 面相 关 事 件 处 理 函 数 一 一 监听 用 户 下 拉动 作 
| */ 

42. onPpullDownRefresh: function()} 1 
43. 

4 | 

45. /二 

46. <* 页 面 上 拉 触 抵 事 件 的 处 理 函 数 
41. */ 

48. onReachBottom: function() { 
49. 

20. 上 

5l. /** 

52. <* 用 户 单 击 右上 角 分 享 

本 */ 

J4. onShareAppMessage: function() 1 
“= 

J6. |} 

111 


与 App0 方 法 的 函数 情况 类 似 ， 开 友 者 同样 可 以 根据 实际 情况 删除 PageO0 中 不 需要 的 函 
数 ， 或 者 保留 该 函数 内 部 为 空 日 。 
除了 函数 外 ，Page0 同 样 也 文 持 添加 目 定 义 的 页 面 变量 ， 示 例 代 码 如 下 : 
. Pagel(l{ 
ARESE / /定义 页 面 变 量 
onLoad: function(options) I 
console.1log (this.myData) // 使 用 this 关键 字 调 用 页 面 变量 
}, 


TN 


- }) 


这 里 ， 变 量 的 名 称 、 取 值 和 数量 也 都 可 以 由 开发 者 目 定义 。 

初始 数据 

在 Page0 方 法 中 默认 生成 的 第 一 项 就 是 data 属性 ， 该 属性 是 页 面 第 一 次 演 染 使 用 的 初始 
数据 。 当 页 面 加 载 时 ，data 将 会 以 JSON 字符 串 的 形式 由 馆 辑 层 传 至 泻 染 层 ， 因 此 data 中 的 
数据 必须 是 可 以 转 成 JSON 的 类 型 ， 例 如 字符 串 、 数 字 、 布 尔 值 、 对 象 、 数 组 。 泻 染 层 可 以 


{HO 第 3 章 小 程序 框架 上 


例如 在 data 中 放置 两 个 目 定 义 数 据 ， 页 面 JS 文件 的 示例 代码 如 下 : 


1. Page (t{ 

2 data:1 

EE msoq0l: "Hello", 
4. msogq02: 2018 

2. } 

6. }) 


对 应 WXML 的 示例 代码 如 下 : 


<view>{{msg01}} {{msg02}}</view> 


此 时 {{msg01}} 和 {{msg02}} 不 会 显示 字面 内 容 ,而 是 会 伍 找 data 中 的 初始 数据 ,然后 显 
示 出 “Hello 2018” 字 样 。 

生命 周期 回调 函数 

Pasge0 国 数 中 默认 生成 的 onLoad0、onShowO、onReadyO、onHideO 以 及 onUnload0 均 属 
于 页 面 的 生命 周期 回调 函数 ， 具 体 说 明 如 下 。 

e onLoad(): 格式 为 onLoad(Object querV)， 只 在 页 面 加 载 时 触及 一 次 ， 可 以 在 onLoad0 
的 参数 中 获取 打开 当前 页 面 路 径 附 市 的 参数 。 

e onShow0: 当 页 面 显 示 或 从 小 程序 后 台 切 入 前 人 台 时 触 肥 。 

。 onReady(): 当 页 面 初次 演 染 完成 时 触发 。 注 意 ， 一 个 页 面 只 会 调用 一 次 ， 代 表 页 面 
己 经 准备 葡 当 ， 可 以 和 视图 层 进行 交互 。 

。 onHide(): 当 页 面 隐藏 /切入 后 台 时 触发 。 例 如 navigateTo 或 底部 tab 切换 到 其 他 页 面 ， 
小 程序 切入 后 人 台 等 。 

e onUnloadO0: 当 页 面 番 载 时 触发 。 例 如 redirectTo 或 navigateBack 到 其 他 页 面 时 。 

页 面 事件 处 理 函 数 

Page0 方 法 中 默认 生成 的 onPullDownRefresh()、onReachBottom()、onShareAppMessage() 

以 及 未 目 动 生成 的 onPageScroll0、onTabItemTapO 均 属于 页 面 事 件 处 理 图 数 ， 有 具体 说 明 如 下 。 

e。 onPullDownRefreshO: 监听 用 户 下 拉 刷 新 事件 ， 需 要 在 app.json 的 window 选项 中 或 
页 面 配置 中 开局 enablePullDownRefresh 。 

e onReachBottom0: 监听 用 户 上 拉 触 故事 件 ， 可 以 在 app.]Son 的 window 选项 中 或 页 面 
配置 中 设置 触发 距离 onReachBottomDistance。 在 触发 距离 内 滑动 期 间 ， 本 事件 只 会 
做 触 肥 一 次 。 

。 onPageScroll(OBJECT): 监听 用 户 滑 动 页 面 事 件 。 其 参数 OBJECT 具有 唯一 属性 
scrollTop， 该 属性 为 Number 类 型 ， 表示 页 面 在 垂直 方向 已 深 动 的 距离 (单位 为 px)。 

。 onShareAppMessage(OBJECT): 监听 用 户 单 击 页 面 内 “ 转 及 ” 投 钮 〈<button> 按 钮 组 
件 ， 其 属性 值 open-type='"share") 或 右上 和 角 沫 早 “ 转 友 ” 控 钮 的 行为 ,并且 目 定义 转 
发 内 容 。 其 OBJECT 参数 如 表 3-6 所 示 。 


表 3-6 onShareAppMessage() 万 法 的 QBJECT 参数 


参数 最 低 版 本 
转发 事件 来 源 (button: 页 面 内 “转发 ”按钮 ，menu， 右上 角 “ 转 


| 
I | 


二 


全 Strin i 1.2.4 
” | 发 ”菜单 ) 
| 如 果 fom 值 是 button， 则 target 是 触发 这 次 转发 事件 的 button， 否 
target Object 1.2.4 


川 为 undeftined 
webViewUil 当 页 面 中 包含 <web-view> 组 件 时 返回 当前 <web-view> 的 url 1.6.4 
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此 事件 需要 返回 一 个 Object 对 象 ， 用 于 目 定义 转 肥 了 内容， 返回 内 容 如 表 3-7 所 示 。 


表 3-7 onShareAppMessage() 方 法 的 返回 的 Object 对 象 


字 段 说 有 明 
title 转发 标题 ， 默 认为 当前 小 程序 名 称 
path 转发 路 径 ， 默 认为 当前 页 面 path， 必 须 是 以 根 目 录 / 开 头 的 完整 路 径 


目 定 义 图 片 路 径 ， 可 以 是 本 地 文件 路 径 、 代 码 包 文 件 路 径 或 者 网 络 图 请 路 径 。 其 文 持 
PNG 及 JPG 文件 ， 显 示 图 片 的 长 宽 比 是 5 : 4。 另 外 使 用 默认 截图 ， 最 低 版 本 为 1.5.0 


1mageUrl 


onShareAppMessage(OBJECT) 方 法 的 示例 代码 如 下 : 


LS | 

2 onShareAppMessage: function(res)} 1 

i if tres.from——"button’'}) 1 

= console.1og (res.target) // 页 面 内 “ 转 肝 ”按钮 的 信息 
三 } 

b. return 1 

T title: ' 自 定义 转发 标题 '， 

BB Eath: /page/user?2id 123" // 目 定义 转 友 页 面 路 径 
Se 1 

上 上 U2” | 

11.}) 


说 明 : 第 8 行 引号 中 的 /page/user 是 自 定义 页 面 地 址 ，id=123 是 自 定义 参数 内 容 。 
。 onTabItemTap(OBJECT): 时 击 tab 时 触及， 从 基础 库 1.9.0 开始 文 持 ， 低 版 本 需 做 莱 
容 处 理 。 其 OBJECT 参数 如 表 3-8 所 示 。 


表 3-8 onTabltemTap() 方 法 的 OBJECT 参数 


参数 最 低 版 本 
index 被 单 击 tabItem 的 序号 ， 从 0 开始 1.9.0 
pagePath 被 单 击 tabItem 的 页 面 路 径 1.9.0 


text 似 单 击 tabItem 的 按钮 文字 1.9.0 


onTabItemTap(OBJECT) 方 法 的 示例 代 但 如 下 : 


1. BEage(L 
onTablItemTap (item) { 
Console.l1oog(item.1index) 
4. console.l1log(item.pagePath) 
2 Console.1logt{(item.text) 
60. } 
ee 
组 件 事件 处 理 归 数 
Page0 方 法 中 还 可 以 定义 组 件 事件 处 理 函 数 ,， 在 WXML 页 面 的 组 件 上 添加 事件 绑 定 ， 当 
事件 被 触发 时 就 会 主动 执行 Page0 中 对 应 的 事件 处 理 函 数 。 
例如 tap 就 是 单 击 事件 ， 可 以 使 用 bindtap 属性 在 组 件 上 进行 绑 定 。 这 里 以 <button> 按 钮 
组 件 为 例 ， 为 其 绑 定 单 击 事件 的 WXML 相关 代码 如 下 : 


<button bindtap="btnTap"> 单 击 此 处 </button> 


在 JS 的 Page0 方 法 中 相关 代码 如 下 : 
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- Page (1{ 

btnTap: function() 1{ 
console.1log(' 按 和 钮 被 持 击 。') 

} 


nS 


- }) 


除了 bindtap 可 以 绑 定 半 击 事件 外 ， 还 有 很 多 事件 ， 详 见 3.2.1 入 “WXML”。 
route 
在 Page0 方 法 中 可 以 使 用 this.route 查看 当前 页 面 的 路 人 径 地 址 。 例 如 : 


. Pagel(l{ 
onShow: function() { 
console.l1og (this.route) 


} 


i 


- }) 


加 setData() 
在 Page0 方 法 中 ，setData0 可 以 用 来 同步 更 新 data 属性 中 的 数据 值 ， 也 能 异步 更 新 相关 
数据 到 WXML 页 面 上 。 其 参数 说 明 如 表 3-9 所 示 。 


表 3-9 setData() 参 数 
字段 最 低 版 本 
ee 要 更 新 的 一 个 或 多 个 数据 ， 格 式 为 {keyl:valuel, 
key2:value2…… keyN:valueN! 
callback setData 引起 的 界面 更 新 泻 染 完毕 后 的 回调 函数 1.5.0 


例如 在 Page0 的 data 中 定义 初始 数据 ，JS 文件 代码 如 下 : 


1. Page l(t{ 

2 data:t 

A today: "2018-01--01" 

4 } 

2-2- 1}) 

此 时 WXML 页 面 的 {{today}} 初 始 值 为 2018-01-01。 

为 组 件 奶 加 目 定 义 丫 击 事件 changeData，WXML 页 面 代码 如 下 : 


<view bindtap="changeData">{{today}} </view> 


在 Page(O0 中 退 加 目 定 义 困 数 changeData0 的 具体 内 容 ，JS 文件 代码 如 下 : 


1. Paoge (tl 

2 changeData:functiont 

本 this.setData{(itodayv: T2018-—09-09"1) 

号 } 

3. }) 
如 条 用 刀 触 肥 了 充 组 件 的 单 击 事件 ，WXML 中 的 {{today}} 值 将 立刻 更 新 成 2018-09-09。 
setData0 方 法 在 使 用 时 不 是 必须 事 匈 在 Page0 方 法 的 data 中 定义 初始 全 ， 可 以 在 data 数 
如 有 条 想 读 取 data 中 的 数值 ， 可 以 使 用 this.data 的 形式 。 例 如 ， 上 二 

当前 today 值 ， 可 以 用 this.data.today 表示 。 


代码 如 果 
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生命 周期 
小 程序 应 用 与 页 面 有 各 自 的 生命 周期 函数 ， 它 们 在 使 用 过 程 中 也 会 互相 影响 。 
小 程序 应 用 生命 周期 如 图 3-3 所 示 。 


打开 小 程序 有 | yt /|\ ~ 
Ce 初始 化 本 销毁 小 程序 _ ns 


进入 后 台 回 到 前 台 


onHide() 


3-3 ”小 程 友 应 用 生命 周期 


小 程序 在 被 打开 时 会 首先 触发 onLaunch0 进 行程 序 局 动 ， 完 成 后 调用 onShow0 准 备 展示 
页 面 ， 如 采 被 切换 进入 后 台 会 调用 onHide0， 下 到 下 座 程 序 在 销毁 前 重新 倍 唤 起 会 再 次 调用 
onShow()。 

小 程序 页 面 生命 周期 如 图 3-4 所 示 。 


onReady() 


倪 座 污染 


大、 打开 页 面 | 初始 化 可 页 nn 
进入 后 台 回 到 前 台 


3-4 ”小 程序 页 面 生命 周期 


在 小 程序 应 用 生命 周期 调用 完 onShowO 以 后 就 准备 触发 小 程序 页 面 生命 周期 了 。 页 面 初 
次 打开 会 依次 和 触及 onLoad0、onShowO、onReady0 这 3 个 函数 。 同 样 ， 如 下 被 切换 a 到 后 台 ， 
会 调用 页 面 onHide0， 从 后 台 被 唤醒 会 调用 页 面 onShow0O。 和 直到 页 面 关闭 会 调用 onUnload0)， 
下 次 打开 还 会 依次 触发 onLoad0、onShowO、onReadyO 这 3 个 函数 。 

需要 注意 的 是 ，tab 页 面 的 互相 切换 以 及 在 当前 页 面 上 打开 一 个 新 页 面 都 不 算 页 面 关闭 ， 
只 是 起 到 了 隐 天 的 作用 。 这 几 种 情况 只 会 触及 onHide0， 回 到 此 页 面 只 触 肥 onShowOQ， 有 具体 
情况 见 3.1.3 市 “页 面 路 由 ”。 


3.1.3 ”页 面 路 由 
页 面 栈 
在 小 程序 中 页 面 之 间 的 切换 路 由 均 由 框架 统一 进行 管理 ， 框 架 以 栈 的 形式 维护 了 当前 的 
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所 有 页 面 。 当 发 生路 由 切换 的 时 候 ， 页 面 栈 的 表现 如 表 3-10 所 示 。 
表 3-10 ”路 由 方式 与 页 面 栈 的 表现 


路 由 万 式 页 面 栈 的 表现 

初始 化 新 页 面 入 栈 

打开 新 页面 新 页 面 入 栈 

页 面 重 定 回 当前 页 面 出 栈 ， 新 页 面 入 栈 

页 面 返回 页 面 不 断 出 栈 ， 直 到 目标 返回 页 面 
tab 切换 页 面 全 部 出 栈 ， 只 留 下 新 的 tab 页 面 
鞋 加 载 页 面 全 部 出 栈 ， 只 留 下 新 的 页 面 


获取 页 面 梳 

小 程序 使 用 getCurrentPagesO 方 法 获取 当前 页 面 栈 的 实例 ， 实 例 将 以 数组 形式 按 栈 的 顺 
厅 给 出 。 其 中 ， 第 一 个 元 系 为 自 页 ， 最 后 一 个 元 系 为 当前 负面 。 

路 由 万 式 

路 由 方式 及 页 面 生命 周期 函数 如 表 3-11 所 示 。 


表 3-11 路 由 方式 与 页 面 生命 周期 山 数 


路 由 方式 触发 时 机 路 由 后 页 面 
初始 化 小 程序 打开 的 第 一 个 页 面 encoado、onshow0 


打开 新 页 面 | 全 AI ee I i 


页 面 重 定向 调用 a WX.redirectTo 或 使 用 组 件 <navigator ER 


en-type="redirectTo"/> 


调用 API wx.navigateBack 或 使 用 组 件 <navigator 
页 和 面 返 open-type='mavigateBack'"> 或 用 户 单 击 堪 上 角 onUnloadO onShow() 
的 “返回 ”按钮 


调用 API wx.switchTab 或 使 用 组 件 <navigator a : 
吉 参 湛 志 3-1' 
| open-type-"switchTab"/> 或 用 户 切换 tab 计时 时 时 ee 


四 调用 API wx.reLaunch 或 使 用 组 件 <navigator 
重 局 动 凋 用 或 使 用 组 件 本 onUnloadO onLoad()、onShow() 
open-type="reLaunch"/> 


<navigator> 的 用 法 见 第 4 对“ 小 程序 组 件 ” API 的 用 法 见 第 11 章 “ 界 面 API”。 

由 于 tab 页 面 的 切换 情况 比较 复杂 ， 这 里 用 A、B、C、D 几 个 页 面 举例 说 明 。 假 设 其 中 
A、B 为 tabBar 页 面 ，C 是 从 A 打开 的 页 面 ，D 是 从 C 打开 的 页 面 ，tab 切换 对 应 的 生命 周 
期 如 表 3-12 所 示 。 


表 3-12 ”tab 切换 对 应 的 生命 周期 函数 
当前 页 面 路 由 后 页 面 触发 的 生命 周期 按 顺 友 ) 
不 触发 任何 内 容 
A.onHideO、B.onLoadO、B.onShowO 
A.onHide()、B.onShow!() 
C.onUnload()、A.onShow'() 
C.onUnload()、B.onLoad()、B.onShow( 


D | D.onUhnloadO0、C-onUnload0O、B.onLoadO、B.onSshowl) 


A|OIP |> ||» 


D (从 转发 进入 ) A D.onUnload()、A.onLoad()、A.onShow!() 
D【(〈 从 转 上 进入) 


D.onUnload()、B.onLoad()、B.onShow!() 
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3.1.4 ”模块 化 


文件 的 作用 域 

在 小 程序 的 任意 JS 文件 中 声明 的 变量 和 函数 只 在 该 文件 中 有 效 ， 不 同 的 JS 文件 中 可 以 
声明 相同 名 字 的 变量 和 函数 ， 不 会 互相 影响 。 

如 果 需 要 跨 页 面 进 行 数据 共享 ， 可 以 在 appjs 中 定义 全 局 变量 , 然后 在 其 他 JS 文件 中 使 
用 getApp0 获 取 和 和 更新。 例如 在 app js 中 设置 全 局 变量 msg， 代 码 如 下 : 


可 以 被 其 他 JS 文件 调用 。 和 注意， 模块 只 能 
例如 在 根 目 录 下 新 建 utils 文件 夹 并 创 


- function sayHellol(name} I 


CO 


1. APP({ 

2 globalData: { 

= msg: ' Goodbye 2018"' // 这 是 一 个 全 局 变量 
下 到 } 

32。 1}} 


假设 在 testjs 文件 中 希望 修改 全 局 变量 msg 的 值 ， 代 码 如 下 : 


. Var app~=getApp () 
- app-globalpDpata-msg='"Hello 20197" / /全 局 变量 被 更 新 


此 时 在 任意 其 他 JS 文件 中 再 读 取 msg 的 值 都 会 是 更 新 后 的 内 容 。 
模块 的 调用 
小 程序 支持 将 一 些 公 共 JavaScript 代码 放 在 一 个 单独 的 Js 文件 中 ， 作 为 一 个 公共 模块 ， 


通过 module.exports 或 者 exports 对 外 提供 接口 。 
公共 JS 文件 common.js， 人 代码 如 下 : 


Console.log('Hello 53{fnamel ! ") 


} 
- function sayGoodbye (name) { 
console.log('Goodbye ss{name} ! ') 
} 
. module.exports.sayHello=sayHello / /推荐 使 用 这 种 语法 提供 接口 


. eXports.sayGoodbye=sayGoodbye 


上 述 代 码 创 建 了 两 个 目 定 义 图 数 ， 即 sayHello0 和 sayGoodbye()， 且 都 市 有 参数 name。 
再 要 注意 的 是 ，exports 是 module.exports 的 一 个 引用 ,因此 在 模块 中 随意 更 改 exports 的 指 加 
会 造成 未 知 铅 误 。 

在 页 面 JS 中 使 用 require 引用 common.js 文件 ， 此 时 可 以 调用 其 中 的 函数 ， 代 码 如 下 : 


1 var Commen regquirel VETSEGmnene 1s") /7 目前 暂时 不 文 持 绝对 路 径 地 址 
2. Page ({ 

hello: function() | 

4 common.savyHello( 20197") 

三 = } ， 

6 goodbye: ftunction() I 

可 Common .sayGoodbye('2018°") 

Ee } 

3. 1) 


3.1.Ss API 


小 程序 开 友 框 染 提供 丰 晤 的 做 信和 原生 API 接口 ， 可 以 方便 地 调用 短信 提供 的 功能 ， 例 
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如 获取 用 户 信 息 、 本 地 存储 、 地 理 定位 等 。 营 用 的 API 如 下 。 
。 网 络 : 实现 小 程序 与 服务 器 端的 网 络 交 互 。 
。 媒体 : 实现 图 片 、 录 音 、 音 /视频 和 相机 管理 。 
e 文件 : 实现 临时 文件 和 本 地 文件 的 绾 理 。 
。 数据 : 实现 小 程序 本 地 数据 的 绥 存 。 
。 位 置 : 使 用 小 程序 获取 地 理 位 置 和 控制 地 图 组 件 。 
。 设备 : 获得 手机 和 内存、 网络、 传感器 、 扫 码 、 剪 贴 板 、 振 动 等 功能 。 
。 界面 : 实现 交互 反馈 、 导 航 条 设置 、 页 面 导 航 、 动 画 、 绘 图 等 功能 。 
这 些 API 及 其 相关 标签 会 在 后 续 章 他 陆续 介绍 。 


co52igEi 


视图 层 主要 负责 视图 的 显示 ，WXML 页 面 、WXSS 样式 表 和 组 件 都 是 视图 层 的 内 容 。 
3.2.1] WXML 

WXML 的 全 称 是 WeiXin Markup Language〔 微 信和 标记 语言 )， 类 似 于 HIML， 也 是 一 种 
使 用 < 标签 > 和 </ 标 签 > 构建 页 面 结构 的 语言 。 

WXML 具有 数据 绑 定 、 列 表演 染 、 条 件 演 染 、 模 板 、 事 件 和 引用 的 功能 。 

数据 绑 定 

1) 简单 绑 定 

在 WXML 页 面 中 可 以 使 用 {{ 变 量 名 }} 的 形式 表示 动态 数据 。 例 如 : 


<V1iew>1{ {msg}}<view> 


此 时 WXML 页 面 上 不 会 显示 msg 这 个 词 ， 而 是 会 显示 这 个 变量 对 应 的 值 。 动 态 数据 的 
值 都 来 目 JS 文件 的 data 属性 中 的 同名 变量 。 例 如 : 


- Page l(t{ 
data: 二 


1 
2 msg: “你 好 ! ， 

二 } 

< 

上 述 代 码 会 把 “你 好 !7” 泻 染 到 WXML 页 面 上 {{msg}} 出 现 的 地 方 。 
2) 组 件 属 性 绑 定 

组 件 的 属性 也 可 以 使 用 动态 数据 ， 例 如 组 件 的 14、class 等 属性 值 。 
WXML 页 面 的 相关 代码 如 下 : 


<view aas ia 机 斌 < /iew> 


JS 文件 的 相关 代码 如 下 : 


1. Page l(t 

2 data: 1 

eb id: ‘myView' 
了 } 
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下 


}) 


3) 控制 属性 绑 定 
控制 属性 也 可 以 使 用 动态 数据 ， 但 必须 在 引号 内 。 
WXML 页 面 的 相关 代码 如 下 : 


<V1eWw wx:if="'{{condition}}'> 测 试 </view> 


JS 文件 的 相关 代码 如 下 ; 


1. Page l(t{ 

pp data: 

condition: false 
4. } 

3. }} 


上 述 代码 表示 测试 组 件 不 被 显示 出 来 
4) 关键 字 绑 定 
如 果 直 接 在 引号 内 写 布尔 值 也 必须 用 双 花 括号 括 起 来 


. <view wx:if="' {1false}} "> 测试 1</view> 
. <view wx:if="' {ftrue}}' > 测试 2</view> 


注意 : 不 可 以 去 掉 双 花 括 号 直接 写成 WX:if='false'"， 此 时 false 会 被 认为 是 一 个 字符 串 ， 


转换 为 布尔 值 后 表示 true。 


5) 运算 绑 定 

在 双人 花 插 号 内 部 还 可 以 进行 简单 的 运算 ， 其 文 持 的 运算 有 三 元 运算 、 算 术 运 算 、 远 辑 判 
字符 串 运算 和 数据 路 径 运 算 。 

三 元 运算 的 示例 代码 如 下 : 


1. <!1--WXML 页 面 代 但 --> 

2. <View hidden="'{{result ?3 true: falsel}l}" > 该 组 件 将 被 隐藏 </view> 
1. //Js 文件 代码 

2. Page tll 

EE data: 1 

4. result: false 

2D. } 

6c. }) 


算术 运算 的 示例 代码 如 下 : 


1。<1--WXML 页 面 代码 --> 

2. <view> {{a + b}} + ffcll + d </view> <! 一 -显示 的 结果 是 3+3+d- 一 > 
1. //JS 文件 代码 

2. Page (ll 

二 data: { 

和 44. ee be te ee 

= } 

6 +) 
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双 花 括号 内 的 atb 会 进行 算术 运算 ， 但 是 注意 括号 外 面 的 + 会 原封 不 动 地 显示 出 来 ， 不 


起 任何 算术 运算 作用 。 


逻辑 判断 的 示例 代码 如 下 : 


1.。 <1!--WXMTL 页 面 代码 --> 

2。<view wx:iIift="ffxz > 5}}">» 该 组 件 将 被 显示 </view> 
1. //JS 文件 代码 

2. Pagetll 

EE data: I 

4. 2 9 

三 下 } 

Be 


此 时 ， 判 断 x=5 返回 true， 因 此 wx:if 条 件 成 立 。 
字符 串 运 算 的 示例 代码 如 下 ; 


1 . <1--WXML 页 面 代码 -> 

2. <View> {{' 你 好 '+name}}</view> <!-- 旦 示 的 结果 是 “你 好 小 程序 ”--> 
1. //JS 文件 代码 

2. Page (tl 

es data: | 

和 44. name: ' 小 程序 ' 

2. } 

6. }) 


My 


NS 


| ee | 


此 时 ， 双 人 花 括 亏 中 的 “+” 瑟 起 到 了 连接 前 后 字符 串 的 作用 。 
数据 路 径 运 算 的 示例 代码 如 下 : 


.<1--WXML 页 面 代码 -> 
. <view>{{object.keyl}} {{array[l1]}}</view> <! -一 显示 的 结果 是 He 2019——> 


. //JS 文件 代码 


中 昌国 | 二 1 人 大 | 
| 二 
key2: Goodbye "' 


arravs | 20011877 20013 “02U | 
} 


- }) 


6) 组 合 绑 定 
用 户 还 可 以 在 双 花 括 写 内 直接 进行 变量 和 值 的 组 合 ， 构 成 新 的 对 象 或 者 数组 。 
数组 组 合 的 示例 代码 如 下 : 


1 .<1--WXML 页 面 代 码 --> 

TO TI TI 4 ~ 
1. /7JS 文件 代码 

2. Page (ll 

i data: | 

4. 下 :3 

三 下 } 
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下 


- }) 


上 述 代码 中 的 x 会 被 昔 换 成 数字 3， 从 而 形成 数组 [1,2,3,4]。 
对 象 组 合 的 示例 代码 如 下 : 


<1--WXML 页 面 代 码 --> 


- <template 1s="test™ data="{{username: valuel, password: value2}}"> 


</template> 


. //JS 文件 代码 


- Page l(t{ 


data: 二 
Valuel : ‘admin', 
valuez : lI23456" 
} 


- 1} 


上 述 代 码 最 终 会 组 合 出 对 象 {Tusername: 'admin', password: '123456'} 。 其 中 ，WXML 代码 


部 分 使 用 了 <template> 标 签 ， 该 标签 可 以 用 于 定义 模板 。 


‘ODT 


用 户 也 可 以 使 用 “...” 稚 写 将 对 象 内 容 展开 显示 ， 不 例 代 人 码 如 下 : 


. <1--WXML 页 面 代码 -一 > 
- <template is="test"™" data="{{.student, gender: 2}}"></template> 


. //JS 文件 代码 
: Page (li 


data: 1 
student: 1 
StilB: 12 


stuName: ' 张 三 " 


-上 二) 


上 述 代码 最 终 会 组 合 出 对 象 { stuID:'123', stuName:' 张 三 ', gender: 2}。 
如 果 对 象 中 元 素 的 key 和 value 名 称 相 同 ， 可 以 省 略 表达 。 示 例 代 码 如 下 : 


1 .<1--WXML 页 面 代码 ---> 

2. <template is="test" data="{ {x, y}}"></template> “1 —11X:X: Vv} } 的 简写 形式 -一 > 
I 

+. Page ll 

区 data: 1 

4. > 

a VvV: "456" 

6. } 

+。 上 


一 


上 一 


上 述 代码 最 终 会 组 合 出 对 象 {x: '123, y: 456} 。 以 上 几 种 方式 可 以 随意 组 合 。 
如 果 存 在 相同 的 key 名 称 ， 后 者 会 覆盖 前 者 的 内 容 。 示 例 代 码 如 下 : 


.<1!1--WXML 页 面 代码 --> 
- <template is="test™ data="{{.obj, vr Zz: 3}}"></template> 


. //JS 文件 代码 


- Page L 
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3 data: 1 

4. om 二 :| 

号 Je 

6. ee 

7 } 

8 . y:6 // 这 里 与 第 5 行 存 在 相同 的 key 名 称 y， 将 履 盖 前 者 的 值 
忆 - } 

10.1}) 


上 上述 代码 最 终 会 组 合 出 对 象 {x:], y:6, z:3}。 
回环 列表 泻 染 
1) 何 单 列表 
小 程序 在 组 件 上 使 用 wx:for 属性 实现 列表 泻 染 ， 即 同一 个 组 件 批量 出 现 多 次 ， 内 容 可 以 
不 同 。 其 原理 是 使 用 wx:for 绑 定 一 个 数组 ， 然 后 承 可 以 目 动 用 数据 中 的 每 个 元 系 依 次 泻 染 该 
组 件 ， 形 成 批量 效果 。 
例如 : 


="< 1 = WAMD==> 
- <View wx:for='{{array}}'" | {index}}: {{fitem} }</view> 


ba 


1. //JSs 文件 代码 

2. Pagertl 

对 data:{ 

A arravy:[ “ 张 二 '，' 李 四 "'，' 王 五 "] 
号 } 

下 】 


运行 结果 等 同 于 : 


1 .<view> 学 生 0: 张 二 </view> 
<1iew> 学 生 1 李 风 过 /wiew> 
3。<View> 学 生 2:， 王 五 </view> 


[5 


在 以 上 代码 中 ，index 是 数组 当前 项 下 标 默 认 的 变量 名 ，item 是 数组 当前 项 默认 的 变量 名 。 
用 户 也 可 以 使 用 wx:for-item 和 wx:for-index 目 定 义 当 前 元 系 和 下 标的 变量 名 。 将 上 面 示 
例 代 码 的 WXML 部 分 修改 如 下 : 
1 。 <view wx:for=" {1{arrav}}" wx:for—index="stulID’' wx:for—item="stuName'> 


2 学 生 { {stuID}}: {{stuName}} 
3. </view> 


能 得 到 完全 一 样 的 运行 结果 。 
需要 注意 的 是 ，wx-for 引号 中 数组 的 双 花 括号 不 可 以 没有 ， 如 果 直 接 填写 数组 变量 名 会 
被 拆 解 为 字符 的 形式 。 例 如 : 


<VIew WwX:for="'array' | {index}}: {{item} }</view> <!—-array 会 被 拆 解 为 "a， Pe ee 
| r= 里 YY” 一 一 芭 


运行 结果 等 同 于 : 


1 view> 学 生 0: a</vVieW> 
.<view> 学 生 1: r</view> 
Ss 


ey 
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4. 
= 


<view> 学 生 3: a</view> 
<view> 学 生 4; Vv</view> 


显然 这 不 是 预期 效果 。 


2) 髓 套 列 表 
wx:for 还 可 以 租 套 出 现 ， 例 如 九 九 乘法 口诀 表 的 代码 如 下 : 


Le = l= WM = 

2. <View wx:for~="{{arrav}}™” wx:for—item—"1i"> 
3- <vVview wx:for="{{array}}™ wx:for-item="] "> 
:时 过 了 TeW wx:1if="{{1i <= 了 上 上 上 >> 

D. ot 

6. </Vview> 

了 < /Tiew> 

8. </view> 

TAgS 件 代 到 

727. Page tl 

本 < data: 1 

a aTrtav [le Ze 3 de rb MAHe Be dl 
D. } 

6. 1}) 


3) 多 而 点 列表 
用 户 可 以 将 wx:for 用 在 <block> 标 丛 上 ， 以 渔 染 一 个 包含 多 慷 点 的 结构 块 。 例 如 : 


1. <block wx:for="{{[ ' 张 二 ",，“" 李 四 " "于 "i}"™> < 1! 一 -数组 也 可 以 直接 写 在 wx:for 中 --> 
De 

3. <view> 姓名 : {{item}} </view> 

4. </block> 


一 


运行 结果 等 同 于 : 


TEN 
<View> 姓名 ; 张 三 </view> 
<UVIEW> 学 4 1 </Wiew> 
<view> 姓名 : 李 四 </view> 
VIeW> 学 写 ; 2 </Viewy> 


<View> 姓名 ， 王 五 </view> 
注意 : <block> 并 不 是 一 个 组 件 ， 它 仅仅 是 一 个 包装 元 素 ， 不 会 在 页 面 中 做 任何 泻 染 。 


4) wx:key 属性 
表面 使 用 wx:for 的 示例 均 会 在 Console 控制 台 得 到 一 个 warning 提示 ， 如 图 3-5 所 示 。 


[K Console Sources Network Performance Memory Application Security 
top | |Filter Default levels 7 


Mon Aug 28 2618 69:13:27 GMT+6866 (中 国标 准时 间 》WXML Runtime warning 
少 bb./pages/test/test.wxml 


必 bb Now you can provide attr "wx:key" for a "wx:for" to improve performance. 


图 3-5 ”Console 控制 台 的 warning 提示 
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上 述 提示 的 大 致 内 容 是 建议 用 户 使 用 wx:key 属性 提高 wx:for 的 性 能 表现 。 
这 是 由 于 如 条 列表 中 的 项 目 位 置 会 动态 改变 或 者 有 新 的 项 目 添 加 到 列表 中 ， 可 能 导致 列 
表 乱 序 。 如 采用 户 明 确 地 知道 该 列表 是 衣 态 的 或 者 顺序 不 重要 ， 可 以 选择 忽略 该 提示 。 
奢 要 避免 乱 序 的 情况 或 不 想 看 到 该 提示 , 可 以 使 用 wx:key 属性 指定 列表 中 的 项 目 唯一 标 
识 伯 。wx:key 的 全 以下 面 两 种 形式 提供 。 
e。 字符 串 : 代表 在 wx:for 循环 数组 中 的 一 个 项 目 属性 ， 该 属性 值 需要 是 列表 中 唯一 的 
字符 串 或 数字 ， 且 不 能 动态 改变 。 
。 保留 关键 字 *this， 代 表 在 wx:for 循环 中 的 项 目 本 身 ， 这 种 表示 需要 项 目 本 身 是 唯一 
的 字符 串 或 者 数字 。 
这 里 以 wx:key 属性 为 目 定 义 字符 串 为 例 ， 代 人 码 如 下 : 
1 <view wx For=" [| "二 "。，" 李 四 " 于 页 1 we Kevy= staf anae 元 > 


ee <view> 守 生 11indexlij: litem}l </view> 
3. </vVview> 


1. <view> 学 生 0: 张 二 </view> <!--wx: Key= stuU0U 一 一 > 
2 .<view> 学 生 1: 李 四 </view> <!--wx:key='stul'——> 
3. <view> 学 生 2: 王 五 </view> <!——Wx: Key=" stuz2'"——> 


当 数据 改变 导致 页 面 被 重新 泻 染 时 会 自动 校正 带 有 key 的 组 件 ， 以 确保 项 目 被 正确 排序 
并 且 提高 列表 泻 染 时 的 效率 。 
条 件 泻 染 
1) 简单 条 件 
人 在 小 程序 框 洒 中 使 用 wx:i 全 "ffcondition}) 判断 筷 个 需要 簿 染 访 代码 块 。 例 如 ; 
| 
2. <view wx:if-"{{condition}}"> 测 试 组 件 </view> 


1. /7JSs 文件 代码 

2. Page (ll 

SS data:1i 

4 condition: true 

三 } 

6 1}) 

上 述 代 码 表 示 测 试 组 件 可 以 被 显示 出 来 , 如 果 condition 的 值 为 false, 则 该 组 件 无 法 显示 。 
用 户 也 可 以 组 合 使 用 0~N 个 wx:elif 加 上 一 个 wx:else 添加 其 他 条 件 ， 代 码 如 下 : 
<1——WXML——> 

<View wrx:if="{{x > 5S}ll"> A </view> 


<Vview wx:elif="{{x > 21}}"> B </view> 
<View Wx:elsey> C </view> 


记 Lu fu 请 


/71JS 文件 代码 
page ll 
data:{ 
> 
} 


i 


: }) 
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由 于 x>5 不 成 立 ，A 组 件 不 被 显示 ; x>2 成 立 ，B 组 件 被 显示 并 且 直 接 忽 略 C 组 件 。 
2) 多 节点 条 件 
如 果 要 一 次 性 判断 多 个 组 件 标 签 ， 可 以 使 用 <block> 标 签 将 多 个 组 件 包装 起 来 ， 并 在 
<block> 上 使 用 wx:if 控制 属性 。 例 如 : 
. <block wx:1if="{ {true}}"> 
<View> Viewl </view> 


1 
党 人 <View> View2 </view> 
4. </block> 


此 时 可 以 同时 控制 viewl 和 view2 的 显示 与 隐藏 。 

3) wxiif 与 hidden 

读者 通过 学 习 可 以 发 现 ，wx: 让 和 hidden 属性 都 可 以 规定 组 件 的 显示 和 隐藏 效果 。 这 两 
种 属性 的 对 比如 表 3-13 所 示 。 


表 3-13 ”WwWx:if 与 hidden 属性 的 对 比 
属性 消耗 
布尔 值 ，tnue 为 显 | wx 这 是 惰性 的 ， 如 果 初 始 演 染 条 件 为 false， 框 架 
weit | 天 关 隐 藏 | 什么 也 不 做 ， 在 条 件 第 一 次 变 成 tue 的 时 候 才 开 | 更 高 的 切换 消耗 
En 始 局 部 泻 染 
布尔 值 , true 为 隐 | 无 论 条 件 是 true 或 false， 初 始 就 会 被 泻 染 ， 只 是 | yyw wp ww pr 
hidden | 藏 ，alse 为 显示 “| 简单 地 控制 显示 与 隐藏 I 


综 上 所 述 , 如 果 需 要 频繁 地 切换 组 件 , 用 hidden 更 好 ; 如 果 在 运行 时 条 件 很 少 发 生 改 变 ， 
则 wx:f 更 好 。 开 发 者 可 以 根据 实际 需要 选择 其 中 一 种 属性 或 两 种 组 合 使 用 。 

模板 

小 程 厅 框 染 允 许 在 WXML 文件 中 提供 模板 (template )， 模 板 可 以 用 于 定义 代码 片段 ， 
然后 在 不 同 的 页 面 被 重复 调用 。 

1) 定义 模板 

小 程序 使 用 <template> 在 WXML 文件 中 定义 代码 搬 段 作为 模板 使 用 ， 每 个 <template> 都 
使 用 name 属性 自 定 义 模板 名 称 。 例 如 : 


1]. <template name="myTemp"> 

之 <V1IewW> 

<text> Name: {{namel} </text> 
4 <text> Age: {{age}} </text> 

与 </view> 

6. </template> 


上 述 代码 表示 制作 了 一 个 名 称 为 myTemp 的 模板 ， 该 模板 包含 了 一 个 <view> 组 件 ， 其 内 
部 这 有 两 个 <text 组 件 ， 分 别 用 于 表示 姓名 和 年 龄 ， 其 中 name 和 age 可 以 动态 变化 。 

2) 使 用 模板 

在 新 的 WXML 页 面 继续 使 用 <template> 标 签 就 可 以 引用 模板 内 容 了 ， 引 用 的 <template> 
标签 必须 带 有 is 属性 ,该 属性 值 用 于 指定 正确 的 模板 名 称 才 能 成 功 引 用 , 然后 使 用 data 属性 
将 模板 所 需要 的 数据 值 传 入 。 例 如 : 


1. <i——WXML——> 
2. <template is="myTemp™ data="{{..student}}"/> 


{HO 第 3 章 小 程序 框架 


. A//JS 文件 代码 
. Page l(tl{ 
data:{ 
student: I 
name: ' 张 三"'， 
Aage: 20 


DJ] 人 TN 


: 1}) 


模板 拥有 目 己 的 作用 域 , 只 能 使 用 data 传 入 的 数据 。 上述 代 码 表示 引用 name 为 myTemp 
的 模板 ， 并 且 姓 名 和 年 龄 分 别 更 新 为 张 三 和 20。 

事件 

事件 是 视图 层 到 逻辑 层 的 通信 方式 ， 有 以 下 特点 ， 

e。 可 以 将 用 户 的 行为 反馈 到 逻辑 层 进行 处 理 ; 

。 可 以 绑 定 在 组 件 上 ， 当 触发 事件 时 就 会 执行 逻辑 层 中 对 应 的 事件 处 理 函数 ， 

。 对象 可 以 携 市 额外 信息 ， 例 如 id、dataset、touches。 

1) 事件 的 使 用 方式 

自 先 需 要 在 WXML 页 面 为 组 件 绑 定 一 个 事件 处 理 函 数 ， 例 如 : 


<button id="myBtn”" bindtap="myTap” data—my="hel lo"> 按 钮 组 件 </button> 
上 述 代 码 表 示 为 按钮 绑 定 了 一 个 触摸 单 击 事件 ， 用 手指 触 摧 后 将 执行 目 定 义 图 数 


myTap0O。 其 中 data-* 为 事件 附加 属性 ， 可 以 由 用 户 目 定义 或 省 略 不 写 。 
然后 必须 在 对 应 的 JS 文件 中 添加 同名 函数 ， 硅 函数 不 存在 ， 则 会 在 触 肥 时 报错 。 例 如 : 


1. Page l(t{ 

2 myTap:function(e){ // myTap:function(e) 也 可 以 简写 为 myTap (e) 
3. console.1log(e) / /打印 输出 事件 对 象 

4. } 

到 二】 


运行 代码 ， 然 后 触摸 单 击 该 按钮 ，Console 控制 台 输 出 的 内 容 如 图 3-6 所 示 。 


Console Sources Network Performance Memory Application Security Audits 


™ Filter Default levels 了 


pftype: tap”, timestamp: 2859, target: {.}, currentTarget: 1..}, detail: {1..}, ..} 


图 3-6 ”触发 tap 事件 时 Console 控制 台 输出 的 内 容 


展开 输出 内 容 前 面 的 篆 头 可 以 查看 六 


{ 
tvpe: "tap y 
timeSstamp:2809, 
currentTarget: 1 
id: “mmYBtm ， 
dataset: 1 
my:" he Lo 


情 ， 整 理 后 节选 信息 如 下 ; 


<] GOn 上 uhoo 请 
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8. 

-a }, 

10. detail: {x: 214, vv: liol}, 
11. touches:|I1 

| lident1ifier:0, 

I pageX:214, 

14. pageY:1i.5, 

Ls clientX:214. 

16. clientY:1i.5 


由 此 可 见 输出 的 事件 对 象 包 含 了 按钮 的 id 名称、 附属 的 data-my 属性 值 、 坐 标 位 置 、 事 
件 类 型 等 信息 。 例 如 想 获 得 data-my 中 的 数据 值 ， 可 以 搬 述 为 e.currentTarget.dataset.my， 开 
发 者 之 后 可 以 利用 这 些 信息 进行 后 续 的 代码 编写 。 

2) 事件 的 分 类 

事件 分 为 冒 泡 事件 和 非 冒 泡 事件 ， 说 明 如 下 。 

。 冒 泡 事件 : 当 一 个 组 件 上 的 事件 被 触发 后 ， 该 事件 会 问 父 节点 传递 。 

。 非 昌 泡 事 件 ， 当 一 个 组 件 上 的 事件 被 触 友 后 ， 该 事件 不 会 同 父 节 扣 传递 。 

WXML 中 文 持 的 冒 泡 事件 如 表 3-14 所 示 。 


表 3-14 WXML 中 支持 的 冒 泡 事件 


touchstart 手指 触摸 动作 开始 

touchmove 手指 触摸 后 移动 

touchcancel 手指 触 换 动作 被 打 断 ， 例 如 来 电 提 醒 、 弹 密 

touchend 手指 触 拘 动作 结束 

tap 手指 触 换 后 马上 离开 

longpress 手指 触 损 后 超过 350ms 再 离开 , 如 果 指 定 了 事件 回调 函数 并 和 触及 了 这 个 事件 , tap 
事件 将 不 被 触发 (最 低 版 本 为 1.5.0) 

longtap 手指 触摸 后 超过 350ms 再 离开 (推荐 使 用 longpress 事件 代 符 ) 

transitionend 会 在 WXSS transition 或 wx.createAnimation 动画 结束 后 触发 

animationstart 会 在 一 个 WXSS animation 动画 开始 时 触发 

animationiteration 会 在 一 个 WXSS animation 一 次 友 代 结束 时 触及 

animationend 会 在 一 个 WXSS animation 动 夯 完成 时 触发 


touchforcechange 在 文 持 3D Touch 的 iPhone 设备 上 重 按 时 会 甬 肥 《最 低 厂 本 为 1.9.90 ) 


注意 : 除了 表 3-14 之 外 的 其 他 组 件 自 定义 事件 ， 如 无 特殊 声明 ， 都 是 非 冒 泡 事 件 ， 例 
如 表单 <form> 的 提交 事件 、 输 入 框 <input> 的 输入 事件 等 ， 详 见 第 4 章 “ 小 程序 组 件 ”。 


3) 事件 绑 定 和 冒 泡 

事件 绑 定 的 与 法 与 组 件 的 属性 摘 述 相同 ， 均 是 以 key=value 的 形式 ， 说 明 如 下 。 

。 key: 以 bind 或 catch 开头 ， 人 然后 跟 事 件 的 区 型 ， 例 如 bindtap、catchtouchstart。 目 基 
础 库 版 本 1.5.0 起 ，bind 和 catch 后 可 以 紧 跟 一 个 冒号 ， 其 含义 不 变 ， 例 如 bind:tap、 
catch:touchstart。 

e value: 一 个 字符 串 ， 需 要 在 对 应 的 Page 中 定义 同名 的 国 数 。 
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bind 事件 和 catch 事件 的 区 别 是 ，bind 事件 绑 定 不 会 阻止 冒 泡 事件 向 上 冒 泡 ，catch 事件 
绑 定 可 以 阻止 冒 泡 事件 同上 站 泡 。 
例如 有 3 个 <view> 组 件 A、B、C， 其 中 A 包含 B、B 包含 C， 代 码 如 下 : 


1. <view iqd="A™ pindtap="tapl"> <I== 冒 视 事 性， 但 没有 父 人 所 了 个 传 奸 ==> 

二 View A 

Ee <V1iIeWw ld="B"” catchtap="tap2"> <!--- 阻 止 了 冒 泡 事 件 ， 不 传递 给 父 节 点 View A--> 
4 . View B 

5. vi 

6. View C 

oe </view> 

3 </view> 

9. </view> 


此 时 如 果 早 击 C 组 件 会 触 友 tap3， 然 后 tap 事件 会 同上 冒 泡 全 父 节 后 View B 导致 触发 
tap2， 但 由 于 了 B 组 件 使 用 的 是 catchtap， 所 以 阻止 了 tap 事件 继续 冒 泡 ， 如 果 单 击 了 B 组 件 会 
触 友 tap2; 单 击 A 组 件 会 触 友 tap1。 

4) 事件 的 捕 疆 阶段 

目 基 础 库 版 本 1.5.0 起 ， 触 岳 尖 事件 文 持 捕获 阶段 ， 可 以 在 组 件 的 骨 泡 事件 被 触及 之 前 
进行 事件 的 捕获 ， 使 其 无 法 时 泡 。 捕 获 阶 段 事 件 的 顺序 与 冒 泡 阶 段 完 全 相反 ， 有 是 由 外 回 内 进 
行 捕获 。 

事件 捕获 的 写法 是 capture-bind (或 capture-catch ) :key=value 的 形式 ， 说 明 如 下 。 

。 capture-bind: 在 时 泡 阶段 之 前 捕获 事件 。 

。 capture-catch: 在 冒 泡 阶段 之 前 捕获 事件 ， 并 且 取 消 冒 泡 阶段 和 中 断 捕 获 。 

。 key: 事件 的 类 型 ， 例 如 tap、touchstart 等 ， 但 只 能 是 触摸 类 事件 。 

e。 value: 一 个 字符 串 ， 需 要 在 对 应 的 Page 中 定义 同名 的 函数 。 

例如 有 两 个 <view> 组 件 A 和 B， 其 中 A 所 舍 B， 代 码 如 下 : 


1 .<VIeW id="A™”" bindtap="tapl” capture—bind:tap="tap2"> 
区 View A 

Ef <View id="B”" bindtap="tap3" capture-bind:tap="tap4"> 
4. View B 

I </view> 

6. </view> 


如 果 单 击 组 件 B 会 先后 调用 tap2、tap4、tap3 和 tap1。 这 是 由 于 捕获 优先 级 大 于 冒 泡 ， 
且 由 外 问 内 ， 所 以 会 自 先 触 友 tap2 然后 是 ttp4。 捕 获 阶段 结束 后 由 启 问 外 触发 秆 泡 事 件 ， 
此 接 看 触及 的 是 tap3 最 后 是 tap1。 


注意 : 若 把 上 述 代 码 中 第 1 行 的 capture-bind 替换 为 capture-catch， 则 只 会 触发 tap2， 
然后 捕获 被 中 断 ， 冒 泡 阶 段 也 被 取消 。 


5) 事件 对 象 详解 
事件 对 象 可 以 分 为 基础 事件 (BaseEvent)、 自 定义 事件 (CustomEvent) 和 触摸 事件 
(TouchEvent)。 事 件 对 象 所 包含 的 具体 属性 如 表 3-15 所 示 。 
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表 3-15 事件 参数 
基础 事件 〈BaseEvent) 对 象 属性 列表 
属 性 说 明 
type 事件 大 于 
timeStamp 事件 生成 时 的 时 间 戳 
target 触发 事件 的 组 件 的 一 些 属性 值 集合 
currentlarget 当前 组 件 的 一 些 属性 值 集合 
自 定义 事件 (CustomEvent)〉 对象 属 性 列表 (继承 BaseEvent) 
属 性 说 明 
detail 额外 的 信息 
触摸 事 件 ‘TouchEvent)〉 对 象 属性 列表 (继承 BaseEvent) 


属性 说 明 


touches 触摸 事件 ， 当 前 停留 在 屏幕 中 的 触摸 点 信息 的 数组 
changedTouches 触摸 事件 ， 当 前 变化 的 触摸 点 信息 的 数组 


注意 : <canvas> 组 件 中 的 触摸 事件 不 可 以 冒 泡 ， 所 以 没有 currentTarget 属性 。 


基础 事件 对 象 中 的 target 和 currentTarget 属性 包含 的 参数 相同 ， 如 表 3-16 所 示 。 


表 3-16 target 和 currentTarget 参数 
属 性 类 型 说 明 
id 当前 组 件 的 ID 
tagName 当前 组 件 的 类 型 


dataset 当前 组 件 上 由 data- 开 头 的 自 定义 属性 组 成 的 集合 
其 中 dataset 只 能 接受 data-* 的 传递 形式 ， 例 如 : 


<button bindtap="myTap” data—test="hello™ > 按钮 组 件 < /button> 


触发 事件 后 dataset 所 著 得 的 集合 就 是 {test: "hello"}。 
如 果 摘 述 多 个 词 用 连 字 符 〈(-) 连接 , 会 被 强制 转换 为 驼峰 标记 法 ( 叉 称 为 Camel 标记 法 ， 
特点 是 第 一 个 单词 全 部 小 写 ， 后 面 每 个 单词 只 有 首 字 母 大 写 )， 例 如 : 


<button bindtap="myTap” data—my—test="hello”" > 按钮 组 件 </button> 


触 肥 事件 后 dataset 所 绪 得 的 集合 束 古 {myTest: "hello"}。 
如 条 同一 个 词 里 面 有 大 与 字母 ， 会 被 强制 转换 为 小 与 字母 ， 例 如 : 


<button bindtap~="myTap™” data—myTest= "nello"> 按 钮 组 件 </button> 


触发 事件 后 dataset 所 获得 的 集合 就 是 {mytest: "hello"}。 

目 定义 事件 对 象 中 的 detail 属性 用 于 携带 数据 , 不 同 的 组 件 所 携带 的 detail 有 所 差异 。 例 
如 表单 组 件 的 提交 事件 会 携 市 用 户 的 输入 ， 媒 体 的 错误 事件 会 携 市 错误 信息 等 ， 具 体 用 法 详 
匈 第 4 草 。 

触摸 事件 对 象 的 touches 是 一 个 数组 ， 里 面 每 一 个 元 销 都 是 一 个 单独 的 touch 对 象 ， 表示 
当前 停留 在 屏幕 上 的 触摸 点 ， 属 性 如 表 3-17 所 示 。 
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表 3-17 ” touch 对 象 参 数 
属 性 说 明 
identifier 触摸 点 的 标识 符 
pageX, pageY 距离 文档 左上 角 的 距离 ， 文 档 的 左上 角 为 原点 ， 模 回 为 往 轴 ， 纵 同 为 了 和 轴 
距离 页 面 可 显示 区 域 〈 屏 幕 除 去 导航 条 ) 左上 角 的 距离 ， 横 向 为 X 轴 ， 纵 
cllentX. clientY Number 向 为 立轴 


canvas 和 触 损 事 件 中 携 市 的 touches 是 CanvasTouch 对 象形 成 的 数组 , 属性 如 表 3-18 所 示 。 


表 3-18 CanvasTouch 对 象 人 参数 
属 ”性 说 明 
identifier 触摸 点 的 标识 符 
距离 Canvas 左上 和 角 的 距离 ，Canvas 的 左上 角 为 原点 ， 横 向 为 义 轴 ， 纵 向 


a 为 立轴 


changeTouches 属性 与 touches 完全 相同 ， 表 示 有 变化 的 触摸 点 ， 例 如 从 无 变 有 
Ctouchstart)、 位 置 变化 〈touchmove)、 从 有 变 无 (touchend、touchcancel)。 

加 引用 

WXML 提供 了 import 和 include 两 种 文件 引用 方式 。 

1 ) import 

小 程序 可 以 使 用 <template> 标 位 在 目标 文件 中 事先 定义 好 模板 ， 然 后 在 当前 页 面 使 用 
<import 标 签 引用 <template> 中 的 内 容 。 

例如 ， 在 tmpl.wxml 文件 中 使 用 <template> 定 义 一 个 名 称 为 tmnpl01 的 模板: 

. <template name="tmp101"> 


ui <text>{ {text}}</text> 
3. </template> 


一 


然后 在 首页 Index.wxml 中 使 用 <import= 引 用 tmplwxml， 就 可 以 使 用 tmpl01 模板 : 


一 


- <import src="tmpl .wxml"/S> 
2. <template is="tmpl01l™ data="{{text: ‘hello’'}}"/> 


此 时 等 同 于 在 index.wxml 中 显示 J: 


<text>hello</text> 


需要 注音 的 是 ，<import> 有 作用 域 的 概念 ， 即 只 会 引用 目标 文件 目 己 定义 的 template， 
而 不 会 引用 目标 文件 里 面 用 <import= 引 用 的 第 三 方 模板 。 
假设 有 A、B、C3 个 页 面 ， 其 中 B importA， 且 CimportB， 那 么 B 页 面 可 以 使 用 A 页 
面 定义 的 <template> 模 板 , C 页 而 可 以 使 用 B 页 面 定义 的 <template> 模 板 , 但 是 C 页 面 不 可 以 
使 用 A 页 面 定 义 的 <template> 模 板 ， 即 使 该 模板 已 经 锐 B 页 和 面 引 用 。 
A 页 面 awxml 的 代码 如 下 : 
1 。 <template name="A"> 


汪汪 <text> A 页面 模板 </text> 
3. </template> 


B 页 面 bwxml 的 代码 如 下 : 
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- <import src="a.wxml"™/> 

- <template name="B"> 
<text> B 页 面 模板 </text> 
. </template> 
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C 页 面 c.wxml 的 代码 如 下 : 


1 过 impor src="h.wxml™/S 
2 <temnlate i1s="A"™/3 二 1 用 可 板 失 凰 1C 必须 目 己 po 号 可 可 以 三 一 
IE 引用 模板 成 功 ! C 页 面 有 import B 一 一 > 


这 是 为 了 避 倪 多 个 页 面 彼此 互相 连接 引用 陷入 还 辑 错误 。 

2) include 

小 程序 使 用 <include> 将 目标 文件 除了 <template> 以 外 的 整个 代码 引入 ， 相 当 于 把 目标 文 
件 的 代码 直接 复制 到 了 <include> 标 位 的 位 置 。 

例如 为 页 面 制作 统 一 的 页 眉 、 页 脚 ， 示 例如 下 。 

页 眉 header wxml 的 代 们 : 


<Vview> 这 征 小 程序 的 页 眉 </view> 

页 脚 footerwxml 的 代码 : 
<view> 这 和 古 小 程序 的 页 脚 </view> 

首页 index.wxml 的 代 公 : 
1. <include src="header .wzxml"™"/> 


。<View> 正 文部 分 </vwiew> 


3. <include src="footer.wxml™/S> 
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<import> 标 丛 更 适合 于 统一 样式 但 内 容 需 要 动态 变化 的 情况 ; <include> 标 丛 更 适合 于 无 
须 改 动 目标 文件 的 情况 。 


3.2.2 WAXSS 

WXSS 文件 的 全 称 是 WeiXin Style Sheets《〈 微 信 样 式 表 )， 这 是 一 种 样式 语言 ， 用 于 描述 
WXML 的 组 件 样式 《例如 斥 寸 、 颜 色 、 边 框 效果 等 )。 

为 了 适应 广大 的 前 端 开发 者 ，WXSS 具有 CSS 的 大 部 分 特性 ， 同 时 为 了 更 适合 开发 微 信 
小 程序 ，WXSS 对 CSS 进行 了 扩充 以 及 修改 。 与 CSS 相 比 ，WXSS 独 有 的 特性 是 尺寸 单位 
和 样式 导入 。 

尺寸 单位 

小 程序 规定 了 全 新 的 尺寸 时 位 rpx (responsive Pixel)， 可 以 根据 屏 共 贤 度 进行 目 适 应 。 
其 原理 是 无 视 设 备 原 先 的 尺寸 ， 统 一 规定 屏幕 宽度 为 750rpx。 

rpx 不 是 固定 值 ， 屏 帮 越 大 ，1rpx 对 应 的 像 系 融 越 大 。 例 如 在 iPhone6 上， 屏幕 宽 度 
为 37Spx， 共 有 750 个 物理 像 闵 ， 则 750rpx = 375px = 750 物理 像 背 ，lrpx = 0.5px = 1 物理 

常见 机 型 的 尺寸 单位 对 比如 表 3-19 所 示 。 
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表 3-19 手机 设备 尺寸 单位 对 比 表 


设备 px 换算 rpx 〈750/ 屏 幕 宽度 ) 
iPhones lpx =2.341px 
iPhone6 Ipx = 21px 

1Phone6 Plus lpx = 1.81rpx 


提示 : 由 于 iPhone6 换算 较为 方便 ， 建 议 开发 者 用 该 设备 作为 视觉 设计 稿 的 标准 。 


样式 导入 
小 程序 在 WXSS 样式 表 中 使 用 @import 语句 导入 外 联 样式 表 ，@import 后 跟 需 要 导入 的 
外 联 样式 表 的 相对 路 径 ， 用 ;表示 语句 结束 。 
例如 有 公共 样式 表 common.wxss， 代 人 码 如 下 : 
1]. .redt 


ee COloOIr: red; 
3a | 


然后 可 以 在 其 他 任意 样式 表 中 使 用 @import 语 句 对 其 进行 引用 。 例 如 a. wxss 的 代码 如 下 : 


- Qimport “common .wxss"} 
- -blue 1 
Color:blues 


} 
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此 时 ，.red 和 .blue 样式 均 能 被 页 面 awxml 使 用 。 
常用 属性 
WXSS 所 文 持 的 样式 属性 与 CSS 属性 类 似 ， 为 方便 读者 理解 本 方 的 示例 代码 ， 表 3-20 
列 出 了 部 分 党 用 样式 属性 和 参考 值 。 
表 3-20 常用 样式 属性 和 人 参考 值 
样式 属性 会 义 参 考 值 


backeround-color 颜色 名 ， 例 如 red 表示 红色 

color 前 景色 同上 

font-size 例如 16px 表示 16 像素 大 小 的 字体 

border 例如 3px solid blue 表示 宽度 为 3 像 系 的 监 色 实 线 
width 例如 20px 表示 20 像素 的 宽度 

height 例如 100px 表示 100 像素 的 高 度 


颜色 可 以 用 以 下 几 种 方式 表示 。 

。 RBG 颜色 : 用 RGB 红 绿 监 三 通道 色彩 表示 法 ， 例 如 rgb(255,0,0) 表 示 红 色 。 

。 RGBA 颜色 : 在 RGB 的 基础 上 加 上 颜色 透明 度 ， 例 如 rgba(255,0,0,0.5) 表 示 半 透明 
红色 。 

。 十 六 进 制 颜色 : 又 称 为 HexColor， 用 # 加 上 6 位 数字 表示 ， 例 如 #ff0000 表示 红色 。 

e。 预定 义 颜 色 : 使 用 颜色 英文 单词 的 形式 表示 ， 例 如 red 表示 红色 。 小 程序 目前 共 预 设 
了 148 种 颜色 名 称 ， 见 附录 。 

内 联 梓 陈 

小 程序 允许 使 用 style 和 class 属性 控制 组 件 的 样式 。 
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] ) style 
style 属性 又 称 为 行内 样式 ， 可 直接 将 样式 代码 写 到 组 件 的 衣 标 釜 中 。 例 如 : 


<View Style=" "color:red;background—color: yellow"> 测 试 < /view> 


上 述 代码 表示 当前 这 个 <view> 组 件 中 的 文本 将 变 为 红色 、 背 景 将 变 为 黄色 。 
style 也 支持 动态 样式 效果 ， 例 如 : 


<view Style="color:{{color}} "> 测试 </view> 


上 述 代 码 表 示 组 件 中 的 文本 颜色 将 由 页 和 面 JS 文件 的 data.color 属性 规定 。 

官方 建议 开 友 者 尽量 不 要 将 静态 的 样式 与 进 style 中 ， 以免 影 啊 洽 染 速 度 。 如 果 是 前 态 的 
样式 ， 可 以 统一 写 到 class 中 。 

2) class 

小 程序 使 用 class 属性 指定 样式 规则 ,其 属性 值 由 一 个 或 多 个 目 定义 样式 类 名 组 成 ,多 个 
样式 类 名 之 则 用 空格 分 隔 。 
例如 ， 在 test.wxss 中 规定 了 两 个 样式 : 
-Style0ltl 


coOJOr: red; //X 字 为 红 也 


} 
| 


font-size: 20px; / /字体 大 小 为 20 像素 
font-weight: bold; // 字 体 加 粗 


J] 


- 】 
在 test.wxml 中 代码 如 下 : 
<View Class="style0l style02"> 测 试 </view> 


上 述 代码 表示 组 件 同时 接受 .style01 和 .style02 的 梓 式 规则 。 注 意 ， 在 class 属性 值 的 引 和 写 
内 部 不 需要 加 上 类 名 前 面 的 所 。 


选择 器 
小 程序 目前 在 WXSS 样式 表 中 文 持 的 选择 融 如 表 3-21 所 示 。 
选 择 器 描述 
.Class 选择 所 有 拥有 class="demo" 属 性 的 组 件 
#id 选择 拥有 id="test" 属 性 的 组 件 
element VIeEWw 选择 所 有 view 组 件 
element. element 选择 所 有 文件 的 view 组 件 和 所 有 的 text 组 件 
-after 在 view 组 件 后 边 插入 内 容 
::before 在 view 组 件 前 边 插入 内 容 


例如 ， 在 WXSS 样式 表 中 规定 : 


一 


. VIewI1 
A width: 100rpx; 
了 


上 述 代 码 表 示 将 当前 页 面 中 所 有 view 组 件 的 宽度 都 更 新 为 100rpx。 
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图 全 局 样式 与 局 部 样式 

对 于 小 程序 WXSS 梓 陈 表 中 规定 的 样式 ， 根 据 其 作用 范围 分 为 两 关 : 在 app.wxss 中 的 
样式 为 全 局 样式 ， 作 用 于 每 一 个 页 和 面 ; 在 页 面 WXSS 文件 中 定义 的 样式 为 局 部 样式 ， 只 作用 
在 对 应 的 页 面 ， 并 会 罗兰 app.wxss 中 相同 的 选择 右 。 


3.2.3 组 件 


组 件 是 WXML 页 面 上 的 基本 单位 ， 例 如 小 程序 页 面 上 的 按钮 、 图 片 、 文 本 等 都 是 用 组 
件 泻 染 出 来 的 ， 详 细 介 绍 见 第 4 章 “ 小 程序 组 件 ”。 


O03.3 flex 布 忆 


flex 模型 

小 程序 使 用 flex 模型 提高 页 面 布局 的 效率 。 这 是 一 种 灵活 的 布局 模型 ， 当 页 面 需 要 适应 
不 同 屏 幕 尺寸 及 设备 类 型 时 该 模型 可 以 确保 元 系 在 恰当 的 位 置 。 

容器 和 项 目 

在 flex 布局 中 ， 用 于 包含 内 容 的 组 件 称 为 容 颖 (container)， 容 锅 内 部 的 组 件 称 为 项 目 
(item)。 容 右 人 允许 包含 藤 套 ， 例 如 : 
<View id="A"> 

<vVview lid="B"> 

<view id="C"></view> 


</viewy> 
</view> 


路 


在 上 述 代码 中 共有 3 个 <view> 组 件 ， 对 于 A、B 来 说 ，A 是 容 右 ，B 是 项 目 ; 对 于 B、C 
来 说 ，B 是 容器 ，C 是 项 目 。 

坐标 轴 

flex 布局 的 坐标 系 是 以 容器 左上 和 角 的 点 为 原点 ， 目 原点 往 右 、 往 下 两 条 坐标 轴 。 在 默认 
青 况 下 是 水 平 布局 ， 即 水 平方 同 从 左 往 右 为 主轴 (main axis)， 垂 直方 同 目 上 而 下 为 交叉 轴 
(cross axis)， 如 图 3-7 (a) 所 示 。 用 户 也 可 以 使 用 样式 属性 flex-direction: column 将 主轴 与 交 
义 轴 的 位 置 互 换 ， 如 图 3-7(b》 有 所 示 。 


(a) 水 平 布局 (b) 垂直 布局 
图 3-7 ”坐标 轴 对 照 图 
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flex 属性 

在 小 程序 中 , 与 flex 布局 模型 相关 的 样式 属性 根据 其 所 属 标签 的 类 型 可 以 分 为 容器 属性 
和 项 目 属性 。 

容器 属性 用 于 规定 容 强 的 布局 方式 ， 从 而 控制 内 部 项 目的 排列 和 对 齐 ， 如 表 3-22 所 示 。 


表 3-22 flex 布局 中 的 容器 属性 
属 性 其 他 有 效 什 


flex-direction | 设置 项 目的 排列 方 回 TOW row-reverselcolumnlcolumn-reverse 
flex-wrap 设置 项 目 是 侣 换行 wrap|wrap-reverse 
设置 项 目 在 主轴 方 铝 上 匠 
Justify-content es 在 主轴 方 同上 的 flex-start | flex-end|centerlspace-between|space-around|space-evenly 


设置 水 平方 回 上 的 对 齐 廊 
式 


alien-items stretch |centerlflex-end|baselinelflex-start 


, 当 多 行 排列 时 , 设置 行 在 交 flex-starticenterlflex-endlspace-between|lspace-around| 
alien-content | 7 pp 久光 stretch 
义 轴 方 回 上 的 对 齐 方 式 space-evenly 


项 目 属 性 用 于 设置 容器 内 部 项 目的 尺寸 、 位 置 以 及 对 齐 方式 ， 如 表 3-23 所 示 。 


表 3-23 flex 布局 中 的 项 目 属性 
属性 其 他 有 效 值 
order 设置 项 目 在 主轴 上 的 排列 顺 友 <integer> 


Ta 

flex-shrink | 收缩 在 主轴 上 次 出 的 项 目 =<number> 
0 
auto 


flex-grow | 扩张 在 主轴 方 铝 上 还 有 空间 的 项 目 <number> 


LO 
to 


flex-basis | 代 伏 项 目的 宽 / 噩 属性 aut <length> 
flex-shrink、 flex-erow 和 flex-basis 3 种 属 nonelanuto| 

性 的 综合 人 简写 方式 (Vilex-grow (Vilex-shrink (Vilex-basis 
align-self | 设置 项 目 在 行 中 交叉 轴 上 的 对 齐 方式 flex-startlflex-end|center|baseline| stretch 


例如 ， 无 法 确定 容器 组 件 的 宽 / 高 却 需要 内 部 项 目 垂 直 居 中 ，WXSS 代码 如 下 : 


.Containert 
display: flex; /* 使 用 flex 布局 ( 必 写 语句 )〉*/ 
flex-direction: column; /* 排 列 方 品 : 垂直 #*V 
justify-content: center;  /* 内 容 调 整 ， 居中 */ 

} 


nb 


后 续 章 丰 将 详细 讲解 这 些 属性 的 作用 。 
3.3.2 之 个 属 性 
flex-direction 属性 


flex-direction 属性 用 于 设置 主轴 方 同 ， 迪 过 设置 坐标 轴 可 以 规定 项 目的 排列 方 同 。 
其 语法 格式 如 下 : 


-Contalinert 


flex—-direction: row (默认 值 ) | Iow—-—reverse | column | column—reverse 
} 
对 属性 值 说 明 如 下 。 


e row: 默认 值 ， 主 轴 在 水 平方 向 上 从 左 到 右 ， 项 目 按 照 主轴 方向 从 左 到 右 排 列 。 
e row-reverse: 主轴 是 row 的 反方 回 ， 项 目 按照 主轴 方 回 从 右 到 左 排 列 。 


e。 column: 主轴 在 垂直 方向 上 从 上 而 下 ,项 目 按照 主轴 方向 从 上 往 下 排列 。 
。 column-reverse: 主轴 是 column 的 反方 同 ， 项 目 按 照 主 轴 方 同 从 下 往 


上 排列 。 


假设 有 项 目 A、B、C 3 个 组 件 ， 高 、 宽 均 相 同 ，flex-direction 取 不 同 值 时 


的 效果 如 图 3-8 所 示 。 


主轴 
项 目 A 项 目 B 项目 C 
flex-direction: row 
及 
外 | 
(a) row〔 默 认 值 ) 
交叉 轴 
项 目 A 
项 目 B 
项 目 C 
主 


机 | ”flex-direction: column 


(c) column 


_ 坪 总 问 


主 
轴 
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视频 讲解 
主轴 
项 目 C 项目 B 项 目 A 


flex-direction: row-reverse 


(Cb) row-reverse 
交叉 轴 


一 > 


flex-direction: column-reverse 


项 目 C 


项 目 B 


项 目 A 


(Cd) column-reverse 


图 3-8 ”flex-direction 属性 值 对 照 图 


flex-wrap 属性 


flex-wrap 属性 用 于 规定 古人 否 允 许 项 目 换行 ， 以 及 多 行 排列 时 换行 的 方 问 。 


其 语法 格式 如 下 : 


.Containert 


flex—-wrap: nowrap (默认 值 》| wrap | wrap—reverse 


} 
对 属性 值 说 明 如 下 。 
。 nowrap: 默认 全， 表示 不 换行 。 如 末 单 行内 容 过 多 ， 项 目 宽度 可 能 会 
。 wrap: 当 容 右 蛙 行 容 个 下 所 有 项 目 时 允许 换行 排列 。 


。 wrap-reverse: 当 容 耸 单 行 容 不 下 所 有 项 目 时 允许 换行 排列 ， 换 行 方 回 


为 wrap 的 反方 回 。 


这 里 以 水 平方 回 为 例 ， 假 设 有 项 目 A、B、C、D 4 个 组 件 ， 完 、 融 均 相 同 ，flex-wrap 取 


不 同 值 时 的 效果 如 图 3-9 所 示 。 
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主轴 主轴 主轴 
项 目 A ”项目 6 项 目 C ”项目 D 项 目 A 项目 6 项 目 C flex-wrap: wrap-reverse 
项 目 D 
flex-wrap: nowrap 项 目 D flex-wrap: wrap 
咱 | 项 目 A ”项目 B 项目 C 
(a) nowrap (b) wrap (Cc) wrap-reverse 
图 3-9 flex-wrap 属性 值 对 照 图 
图 justify-content 属性 
justify-content 属性 用 于 设置 项 目 在 主轴 方 癌 上 的 对 齐 方式 ， 以 及 分 配 项 目 之 间 及 其 周 册 
多 余 的 空间 a 
其 语法 格式 如 下 : 
.Containert 
justify-—content: flex-start N 默认 值 》 | flex—end| center| space—betweenl 
space—around| space—evenly 
} 


对 属性 值 说 明 如 下 。 


flex-start: 默认 值 ， 表 示 项 上 日 对 齐 主轴 起 点 ， 项 目 间 不 留 空 际 。 
center: 项 目 在 主轴 上 居中 排列 ， 项 目 间 不 留 空 际 。 主 轴 上 第 一 个 项 目 离 主轴 起 点 的 


距离 等 于 最 后 一 个 项 目 离 主 轴 终 点 的 距离 。 
flex-end: 项 目 对 齐 主 轴 终 点 ， 项 目 间 不 留 空 际 。 
space-between: 项 目 则 距 相 等 ， 第 一 个 和 最 后 一 个 项 目 分 别离 起 点 /终点 的 距离 为 0。 
space-around: 与 i 相似 ， 不 同 之 处 为 第 一 个 项 目 离 主轴 oh 
起 点 和 最 后 一 个 项 目 离 终点 的 距离 为 中 间 项 目 间 间 距 的 - 人 
space-evenly: 项 目 间距 、 第 一 个 项 目 离 主轴 起 点 以 及 最 后 一 
点 的 距离 均 相 等 。 Oth 
这 里 以 水 平方 向 作为 主轴 为 例 ， 假 设 有 项 目 A、B、C 几 个 组 件 ， ohana 
高 完全 相同 ，justify-content 取 不 同 值 时 的 效果 如 图 3-10 所 示 。 了 
主轴 主轴 
项 目 A | 项 目 B | 项 目 C 项 目 A | 项 目 B | 项 目 C 
X 又 
justify-content: flex-start justify-content: flex-end 
(a) flex-start (b) flex-end 
主轴 
| | 二 | [mc 
X 又 
折 justify-content: center 四 justify-content: space-between 
” (c) center l (d) space-between 


图 3-10 ”justify-content 属性 值 对 照 图 
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z 主轴 、 主轴 _ 
EE a 
x| 
和 justify-content: space-around justify-content: space-evenly 
YY 


(e) space-around (f) space-evenly 
3-10 〈 续 ) 


align-items 属性 
align-items 属性 用 于 设置 项 目 在 行 中 的 对 章 方式 。 
其 语法 格式 如 下 : 

.Containerl 


align—items:stretch (默认 值 ) | flex-start | center | flex-end | baseline 
} 


对 属性 值 说 明 如 下 。 

e。 stretch 〈 默 认 便 ): 未 设置 项 目 太 寸 时 将 项 目 拉 伸 至 填 满 交叉 轴 。 

e flex-start: 项 目 顶 部 与 交叉 轴 起 点 对 齐 。 

e center: 项 目 在 交叉 轴 居 中 对 齐 。 

。 flex-end: 项 目 抵 部 与 交 义 轴 终 点 对 齐 。 

e。 baseline: 项 目 与 行 的 基线 对 齐 , 在 未 单独 设置 基线 时 等 同 于 flex-start。 

这 里 以 垂直 方 同 作为 主轴 为 例 ， 假 设 有 项 目 A、B、C 3 个 组 件 ， 宽 度 分 
别 为 200rpx、300rpx、400rpx 〈 取 值 为 stretch 时 暂 不 设置 )，align-items 取 不 
同 值 时 的 效果 如 图 3-11 所 示 。 


交叉 轴 区 及 轴 


align-items: stretch 轴 align-items: flex-start 


(a) stretch (默认 值 ) (b) flex-start 


币 align-items: center 轴 align-items: flex-end 


(Cc) center (d) flex-end 


图 3-11 align-items 属性 值 对 照 图 
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align-content 属性 
align-content 属性 用 于 多 行 排列 时 设置 项 目 在 交 义 轴 方 同上 的 对 齐 方式 ， 以 及 分 配 项 目 
之 间 及 其 周围 多 余 的 空间 。 
.Containert 
align—content: stretch (默认 值 》 | flex—start | center | flex—end | space~—between 


1 space—around | space—evenly 


} 


对 属性 值 说 明 如 下 。 

。 stretch: 扶 认 值 ， 未 设 芋 项目 尺 寸 时 将 各 行 中 的 项 目 拉 伸 至 需 满 交 义 轴 。 当 设 二 了 项 
目 矿 寸 时 项 目 矿 寸 不 变 ， 项 目 行 拉 伸 人 至 项 满 区 义 轴 。 

e flex-start: 自行 在 交叉 轴 起 点 开始 排列 ， 行 间 不 留 则 距 。 

。 center: 行 在 交叉 轴 中 点 排列 ， 行 间 不 留 间 距 ， 首 行 离 交 叉 轴 起 点 和 尾行 离 交 叉 轴 终 


点 的 距离 相等 。 
e flex-end: 尾行 在 交叉 轴 终 点 开始 排列 ， 行 间 不 留 间 距 。 
。 space-between: 行 与 行 间 距 相等 , 首 行 离 交 义 轴 起 点 和 尾行 离 交 义 轴 终 点 的 距离 为 0。 
。 space-around: 行 与 行 间距 相等 ， 首 行 离 交 叉 轴 起 点 和 尾行 离 交 叉 轴 终 点 的 距离 为 行 


与 行 间 间距 的 一 半 。 
。 space-evenly: 行 间 间 距 、 首 行 离 交 叉 轴 起 点 和 尾行 离 交 叉 轴 终点 的 。 辐 &Sg 
距离 相等 。 二 


注意 : 多 行 排列 时 要 设置 flex-wrap 属性 值 为 wrap， 表 示 允 许 换行 。 


这 里 以 水 平方 癌 作 为 主轴 为 例 ， 假 设 有 项 目 A~E 共 5 个 组 件 且 宽度 不 视频 讲解 
同 ，align-content 取 不 同 全 时 的 效果 如 图 3-12 所 示 。 


主轴 z 主轴 
项 目 A 
项 目 C 项 目 D 
项 目 E 
| 
. align-content: flex-start 
(b) flex-start 
主轴 主轴 


align-content: flex-end 


align-content: center 


这 亲 样 


(c) center (d) flex-end 


图 3-12 align-content 属性 值 对 照 图 
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(g) space-evenly 


3-12 《 续 ) 


3.3.3 项 目 属 性 


order 属性 
order 属性 用 于 设置 项 目 沿 主轴 方向 上 的 排列 顺序 ， 数 值 越 小 ， 排 列 越 靠 前 。 另 外 ， 该 属 


其 语法 格式 如 下 : 
-1temltf 
order: 0 (默认 值 ) | <integer> a 
} 上 . Ey Tn 
0 | er: 
这 里 以 水 平方 向 为 例 ， 假 设 有 项 目 A、B、C 3 个 组 件 ， 宽 、 高 均 相同 ， 轩 
order 取 不 同 值 时 的 效果 如 图 3-13 所 示 。 视频 讲解 


项 目 B 项目 C 项 目 A 


order: -1 order:2 order:6 


ES 


3-13 order 属性 值 对 照 图 


flex-shrink 属性 
flex-shrink 属性 用 于 设置 项 目 收缩 因子 。 当 项 目 在 主轴 方向 上 溢出 时 ， 通 过 项 目 收缩 
子 的 规定 比例 压缩 项 目 以 适应 容器 。 
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其 语法 格式 如 下 : 


- ltemtf 
flex-shrink: 1 (默认 值 ) | <number> 
} 


其 属性 值 为 项 目的 收缩 因 于 ， 只 能 是 非 负 数 。 
当 有 发 生 次 出 时 ， 项 目 太吉 的 收缩 公式 如 下 : 


最 终 长 度 = 原 长 度 x (1- 淤 出 长 度 x 收 缩 因 于 / 压 脓 总 权重 ) 
注意 : 当 遇 到 小 数 的 情况 时 向 下 取 整 ， 不 进行 四 舍 五 入 。 


其 中 压缩 总 权重 的 计算 公式 如 下 ; 
压缩 总 权重 = 长 度 1x 收 缩 因 子 1+ 长 度 2x 收 缩 因 了 于 2 … + 长 度 Nx 收缩 因子 N 


注意 : 当 从 左 往 右 为 主轴 时 ， 长 度 指 的 是 沉 度 ; 当 从 上 往 下 为 主轴 时 ， 长 度 指 的 是 


高 度 。 


这 里 以 水 平方 向 为 例 , 假设 有 项 目 A、B、C 几 个 组 件 , 宽度 均 为 200px， 
分 别 设置 项 目的 收缩 因子 为 1、2、3，WXSS 示例 代码 如 下 : 


-A 
width: 200px; i 
flex-shrink:1; /* 默 认 值 ， 可 以 省 略 该 属性 ， 不 写 */ 天 
视频 讲解 
-BI{ 
width: 200px; 
flex—shrink:2; 
} 
| 
10- width: 200PX7 
11. flex—shrink:3; 


名 ~ GO 和 oo 请 


假设 容器 宽度 仅 有 5300px， 此 时 3 个 项 目的 宽度 之 和 为 600px， 显 然 会 发 生 洲 出 100px 
的 情况 ， 因 此 触 肥 收缩 因 于 进行 宽度 压缩 。 
首先 计算 压缩 总 权重 : 


压缩 总 权重 =200x1+200x2+200x3=1200Px 


当 友 生 洛 出 时 ， 项 目 矿 才 的 收缩 公式 如 下 : 


项 目 的 宽度 =200x {11-100x1/1200) 二 183Ppx 
项 目 B 的 览 度 =200x (1-100x2/1200) 全 166px 
项 目 Cc 的 宽度 =200x (1-100x3/1200)=150px 


由 此 可 见 ， 原 先 同样 宽度 的 项 目 组 件 由 于 收缩 因子 不 同 被 压缩 后 的 宽度 各 不 相同 ， 并 且 
证 明了 收缩 因子 数值 越 大 ， 被 压缩 后 的 长 度 越 短 。 
上 述 例子 的 示意 效果 如 图 3-14 所 示 。 
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容器 width:500px : 主轴 


A B C A Be | 


width:200px width:200 px width:200px | width:183px width:166px width:150px 


(a) 项 目 组 件 在 压缩 前 (b) 项 目 组 件 在 压缩 后 
图 3-14 flex-shrink 应 用 对 照 图 
需要 注意 的 是 ， 只 有 项 目的 flex-shrink 属性 值 总 和 大 于 1 时 洲 出 长 上 度 按照 实际 计算 ， 当 
总 和 小 于 1 时 洲 出 长 度 的 计算 公式 如 下 : 
游 出 长 度 = 实 际 汶 出 长 度 x (收缩 因子 1+ 收 缩 因子 2+…+ 收 缩 因 子 NN) 
例如 ， 上 面 示 例 中 项 目 A、B、C 的 Hex-shrink 属性 值 如 果 分 别 更 新 为 0.1、0.2、0.3， 总 
和 为 0.6， 小 于 1， 则 洲 出 长 度 的 计算 如 下 : 
洲 出 长 度 =100x (0.1+0.2+0.3)=60px 
后 续 的 计算 和 前 面 完全 一 样 。 
flex-grow 属性 
flex-grow 属性 用 于 设置 项 目 扩张 因 了 于 。 当 项 目 在 主轴 方 同 上 还 有 剩余 空间 时 ， 通 过 设置 
项 目 扩 张 因 于 进行 剩余 空间 的 分 配 。 
-。 工 七 em{ 


flex-grow: 0 (默认 值 ) | <number> 
} 


其 属性 值 为 项 目的 扩张 因 于 ， 只 能 是 非 负 数 。 
当 友 生 扩 张 时 ， 项 目 尺 寸 的 扩张 公式 如 下 : 


最 终 长 度 = 原 长 度 + 扩张 单位 x 扩张 因子 
注意 : 当 遇 到 小 数 的 情况 时 向 下 取 整 ， 不 进行 四 使 五 入 .， 
其 中 ， 扩 张 单位 的 计算 公式 如 下 : 
扩张 单位 = 剩余 空间 / (扩张 因子 1+ 扩 张 因子 2+…+ 扩 张 因子 由 


注意 : 当 从 左 往 右 为 主轴 时 ， 长 度 指 的 是 宽度 ; 当 从 上 往 下 为 主轴 时 ， 长 
度 指 的 是 高 度 。 


这 里 以 水 平方 向 为 例假 设 有 项 目 A、B、C 3 个 组 件 ， 宽 度 均 为 100px， 


分 别 贡 和 置 项 目的 扩张 因子 为 0、1、2，WXSS 示例 代码 如 下 : 视频 讲解 
| | 
2 width: lO00px; 
3. flex-grow:0; /#* 上 默认 值 ， 可 以 省 略 该 属性 ， 不 写 */ 
a 
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| 

= width: 1l100px; 
| flex—gqrow:1; 
8. } 

| 

10. width: 1l100px; 
Lia, 让 Lex gramw: 2 


假设 容器 宽度 为 600px， 此 时 3 个 项 目的 宽度 之 和 为 300px， 显 然 会 出 现 多 出 300px 剩 
余 空间 的 情况 ， 因 此 触发 扩张 因子 进行 宽度 扩张 。 
首先 计算 扩张 单位 : 


扩张 单位 =300/7 (0+1+2)=100px 


然后 将 剩余 空间 分 配给 项 目 锅 度 ， 新 的 项 目 宽度 扩张 公式 如 下 : 


项 目 的 宽度 =100+100x0=100px 
项 目 B 的 宽度 =100+100x1=200px 
项 目 c 的 宽度 =100+100x2=300px 


由 此 可 见 ， 原 先 同 样 宽 度 的 项 目 组 件 由 于 扩张 因子 不 同 被 扩张 后 的 宽度 各 不 相同 ， 并 且 
证 明了 扩张 因 于 数值 越 大 ， 补 入 张 后 的 长 度 越 长 。 
上 述 示例 的 示意 效果 如 图 3-15 所 示 。 


容器 width:600px 主轴 容器 width:600px 


A |B C 


-| 100px 剩余 空间 宽度 300px 


(a) 项 目 组 件 在 扩张 前 (b) 项 目 组 件 在 扩张 后 
图 3-15 flex-grow 应 用 对 照 图 


需要 注意 的 是 ， 只 有 项 目的 flex-grow 属性 值 总 和 大 于 1 时 扩张 单位 按照 实际 计算 ， 当 总 
和 小 于 1 时 扩张 单位 就 是 全 部 的 剩余 空间 。 
例如 ， 上 和 面 示例 中 项 目 A、B、C 的 flex-grow 属性 值 如 果 分 别 更 新 为 0.1、0.2、0.3， 总 
和 为 0.6， 小 于 1， 则 扩张 单位 就 是 300px。 后 续 的 计算 与 前 面 完 全 一 样 。 
flex-basis 属性 
flex-basis 属性 根据 主轴 方 癌 代 登 项 目的 宽 或 高 ， 有 具体 说 明 如 下 : 
e 当 容 此 设 置 flex-direction 为 row 或 row-reverse 时 ， 硅 项 目的 flex-basis 和 width 属性 
同时 存在 数值， 则 flex-basis 代 蔡 width 属性 。 
e 当 容 需 设 置 flex-direction 为 column 或 column-reverse 时 , 硅 项 目的 flex-basis 和 height 
属性 同时 存在 数值 ， 则 flex-basis 代 蔡 项 目的 height 属性。 
其 语法 格式 如 下 : 
.ltemf 


flex-basis: auto (默认 值 ) | <number>px 
} 
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需要 注意 的 是 ,数值 比 auto 的 优先 级 更 高 , 如果 flex-basis 属性 值 为 auto， 
而 width〈 或 height) 属性 值 是 数值 ， 则 采用 数 全 作为 最 终 属 性 值 。 
这 里 以 水 平方 器 作 为 主轴 为 例 ， 假 设 有 项 目 A、B、C 3 个 组 件 且 宽度 均 
为 100px， 为 A 退 加 flex-basis 全 为 200px， 了 最 终 示 意 效 来 如 图 3-16 所 示 。 
主轴 视频 讲解 


A B C 


| | | 


width:100px width:100px Width:100px 
flex-basis:200px 


图 3-16 flex-basis 属性 值 对 照 图 


由 该 图 可 见 ， 项 目 A 的 宽度 比 B 和 C 宽 ， 这 是 因为 flex-basis 的 优先 级 大 于 width。 
flex 属性 
flex 属性 是 flex-grow、flex-shrink、flex-basis 的 傈 与 方式 ， 其 语法 格式 如 下 : 

- 1temf 


flex: none | auto | @flex-grow Rflex—-shrinkl@flex-basis 


} 


若 将 属性 值 设置 为 none， 等 价 于 00 auto; 若 设 置 为 auto， 等 价 于 1 1 auto。 
回 align-self 属性 
align-self 属性 设置 项 目 在 行 中 交叉 轴 方 回 上 的 对 齐 方式 ， 用 于 敌 新 容 右 有 的 align-items， 
这 么 做 可 以 对 项 目的 对 齐 方式 做 特殊 人 处理 。 
其 语法 格式 如 下 : 
- 1teml{ 


align—self: auto (默认 值 》 | flex—start | center | flex-end | baseline |stretch 
} 


其 默认 属性 人 为 auto， 表 示 继 承 容 右 的 align-items 全 。 如 条 容 亏 没有 设 
align-items 属性 ， 则 align-self 的 默认 值 auto 表示 为 stretch。 其 他 属性 值 参 
照 align-items 的 说 明 。 

这 里 以 水 平方 向 为 例 ， 假 设 有 项 目 A、B、C、D 4 个 组 件 ， 其 中 A、B、C 


的 宽 / 高 均 相 同 ，DD 不 定义 高 度 ，align-self 取 不 同 值 时 的 效果 如 图 3-17 所 示 。 视频 讲解 
主轴 
D 
flex-start 
B stretch 


center 


C 


flex-end 


图 3-17 align-self 属性 值 对 照 图 
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小 程序 组 件 


本 重 主 要 扩容 是 小 程序 组 件 ， 小 程序 提供 了 丰 蜗 的 组 件 供 开 用 者 使 用 ， 利 用 这 些 组 件 可 
以 进行 快速 开 肥 。 小 程序 组 件 按照 驴 能 特点 目前 可 分 为 视图 容器 、 基 础 内 容 、 表 单 、 导 航 、 
炼 体 、 地 图 和 画布 共 7 类 组 件 。 
章 学 习 目标 


理解 什么 是 小 程序 组 件 ; 

掌握 小 程序 视图 容器 组 件 的 用 法 ; 
掌握 小 程序 基础 内 容 组 件 的 用 法 ; 
掌握 小 程序 表单 组 件 的 用 法 ; 
掌握 小 程 夺 导航 组 件 的 用 法 ; 
掌握 小 程序 媒体 组 件 的 用 法 ; 
掌握 小 程序 地 图 组 件 的 用 法 ; 
掌握 小 程序 画布 组 件 的 用 法 。 


0 4.1 组 件 的 介绍 和 分 类 


4.1.1 组 件 的 介绍 


小 程序 组 件 是 视图 层 的 基本 组 成 单元 ， 它 目 带 微 信 风格 UI 样式 和 特定 功能 效果 。 例 如 ， 
用 户 在 小 程序 页 面 上 所 看 到 的 图 片 、 文 本 、 按 钮 等 都 属于 小 程序 组 件 。 小 程序 为 开发 者 提供 
了 一 系列 基础 组 件 ， 通 过 组 合 这 些 组 件 可 以 进行 更 高 效 的 开发 。 
一 个 组 件 通 沼 包括 < 开始 标签 > 和 </ 结 束 标签 >， 在 开始 标签 中 可 以 退 加 属性 修饰 组 件 ， 
在 首尾 标签 之 内 可 以 刁 套 内 容 。 
其 语法 格式 如 下 : 
< 标签 名 称 属性 -" 值 "> 


内 容 
</ 标 签名 称 > 


例如 : 


< 七 ex 七 id="demo"> 这 是 一 段 文 本 内 容 。 < /text> 


上 述 代 码 表 示 一 个 文本 组 件 text， 用 于 显示 纯 文字 内 容 。 该 组 件 在 本 页 面具 有 唯一 1d 编 
号 "demo"， 其 首尾 标签 之 间 是 想 要 呈现 出 来 的 具体 文本 内 容 。 需 要 注意 的 是 ， 所 有 组 件 和 属 
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性 都 使 用 小 写字 母 。 
其 中 id 属性 是 一 个 通用 属性 ， 可 以 被 所 有 组 件 使 用 。 小 程序 目前 提供 7 类 通用 属性 ， 如 
表 4-1 所 示 。 
表 4-1 小 程序 组 件 通 用 属性 
属性 名 称 备注 


”| 在 同一 个 页 面 中 用 id 值 标识 唯一 组 件 ， 因 此 同一 页 不 


class 组 件 的 样式 类 ”| 该 属性 值 在 WXSS 中 定义 有 关 样 式 内 容 的 设置 
style 组 件 的 内 联 样式 | 可 以 动态 设置 内 联 样式 
hidden 组 件 的 显示 /隐藏 | 组 件 均 默认 为 显示 状态 
a 当 组 件 触 发 事件 时 会 附带 将 该 属性 和 值 发 送 给 对 应 的 


bind*/catch* 组 件 的 事件 绑 定 /捕获 组 件 事件 


注意 : 除 上 述 7 种 通用 属性 外 ， 绝 大 部 分 组 件 还 融 有 自 定 义 的 特殊 属性 ， 用 于 对 组 件 
的 功能 和 样式 进行 修饰 ， 这 些 属 性 将 在 各 类 组 件 中 详细 介绍 。 


4.1.2 ”组件 的 分 类 


组 件 按照 功能 主要 分 为 以 下 7 类 。 

。 视图 容 右 (View Container) 组 件 : 主要 用 于 规划 布局 页 面 内 容 。 

。 基础 内 容 (Basic Content) 组 件 : 用 于 显示 图 标 、 文 字 等 第 用 基础 内 容 。 
。 表单 (Form) 组 件 : 用 于 制作 表单 。 

e 导航 (Navigation) 组 件 : 用 于 跳 转 指定 页 面 。 

。 妹 体 (Media) 组 件 : 用 于 显示 图 片 、 育 频 、 视 频 等 多 妹 体 六 容 。 

。 地 图 (Map) 组 件 : 用 于 显示 地 图 效果 。 

。 男 布 (Canvas) 组 件 : 用 于 绘制 图 画 内 容 。 


视图 容 右 组 件 主要 包含 5 种 ， 如 表 4-2 所 示 。 
表 4-2 视图 容器 组 件 


组 件 名 称 说 明 

VIeW 视图 容器 

scroll-view 可 滚动 视图 容 峪 

swiper 请 块 视图 容器 

movable-view 可 移动 视图 容 砷 

COVeI-VleW 可 禾 兰 在 原生 组 件 上 的 文本 视 岁 容 蜗 


4.2.1 vlew 


view 是 静态 的 视图 容器 ， 通 常用 <view> 和 </view> 标 签 表 示 一 个 容器 区 域 。 需 要 注意 的 


微 信 小 程序 开发 零 基 础 入 门 “ 门 兴 


是 ，view 容器 本 身 没 有 大 小 和 颜色 ， 需 要 由 开发 者 自己 进行 样式 设置 。 
view 对 应 的 属性 如 表 4-3 所 示 。 


表 4-3 view 组 件 属性 


属 性 名 说 明 


hover-class 指定 按 下 去 的 样式 类 。 如 果 是 默认 值 none, 则 没有 单 击 状态 
指定 是 盏 阻 止 本 容 右 的 祖先 方 点 出 现 单 击 状 态 (1.5.0 以 上 版 

hover-stop-propagation | Boolean | ltalse 本 有 效 ) 

hover-start-time Number | 50 | 按 住 本 容器 后 多 久 出 现 单 击 状态 (单位 为 ms) 

hover-stay-time 手指 松 开 后 单 击 状态 保留 的 时 长 〈 单 位 为 ms) 


【 例 4-1】 视图 容器 组 件 view 的 简单 应 用 
WXML (pages/demo01/view/view.wxml)〉 文件 代码 如 下 : 


1 。 <view CaSsSs= 七 1I 七 ee > .视图 容器 工人 W 的 简单 应 用 </view> 
727. <Vlilew Class='demo—box'> 


a <view class="'title'>({1) 不 阻止 父 容器 的 View hover</view> 锅 频 讲解 
4. <Vview Class= "view parent’" hover-class="view hover’'> 

Se 我 是 父 容器 View 

6. View Class='view Son" hover—class='view hover'> 

Ds 我 是 子 容 右 view 

8. </Vview> 


9. < /Tiew> 
10.</viewy> 
11 .<view Cclass="'demo—box'> 


12。 <view Class="'title'" >(2) 阻止 父 容 器 的 View hover</view> 

13- <view Cass= VIEW Parent hover-class=' view hoVeI > 

14: 我 是 父 容 器 view 

下 <view class="vVview So hover-class="view hovwer DovweI-sStop-PIOPagat1ILon> 
1 - 我 是 子 符 器 Tiew 

I </view> 


18. </view> 
19.</view> 


WXSS (pages/demo01/view/view.wxss) 文件 代码 如 下 : 


1- .view parent | 

2 width: 1l100%; 

3 height: 300rpx; 

4. background—color: lightblue; 
8. 

6. .view Son 1{ 

a width: 50% 

3. height: lo0rpx; 

水 margin—left: 20%; 

10. margin-—top: 20rpx; 

11.。 background—color: lightyellow; 
12.1 

13. .view hower 1{ 

14. background—color: red; 

1 


运行 效果 如 图 4-1 所 示 。 
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例 咒 DEMO ale 例题 DEMO 日 例题 DEMOQ 


第 4 章 小 程序 组 件 第 4 章 小 程序 组 件 第 4 章 小 程序 组 件 
1. 视图 容器 view 的 简单 应 用 1. 视图 容 暴 view 的 简单 应 用 1. 视图 容器 view 的 简单 应 用 


(1) 不 阻止 父 容器 的 view_hover (1) 不 阻止 父 容器 的 view_hover (1) 不 阻止 父 容器 的 view_hover 
我 是 父 容 器 View 我 是 父 容器 view 


我 是 子 容 器 view 我 是 子 容器 View 


(2) 阻止 父 容器 的 view_hover (2) 阻止 父 容器 的 view_hover (2) 阻止 父 容器 的 view_hover 
我 是 父 容器 view 我 是 父 容 跑 view 我 是 父 容器 view 


四 四 Wd 
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(a) 页 面 初始 效果 (b) 单 击 第 1 组 子 容器 (c) 单 击 第 2 组 子 容 器 
图 4-1 视图 容 希 组 件 view 的 简单 应 用 


【代码 说 明 】 

本 示例 在 View.wxml 中 使 用 了 两 组 父子 view 容 右 航 僚 效果 ， 并 在 view.wxss 文件 中 分 别 
定义 它们 的 class 属性 值 为 view_parent 和 view_son。 默 认 样 式 效 果 相 同 ， 父 容 右 均 为 浅 览 色 
育 景 、 宽 1002%6、 局 300rpx; 子 容器 均 为 浅黄 包 痛 景 、 宽 50%、 局 150rpx; 早 击 态 均 设置 为 
单 击 后 背景 颜色 更 新 为 红色 效果 。 其 中 第 2 组 子 容器 设置 了 hover-stop-propagation 来 阻止 单 
击 态 传递 给 祖先 元 系 。 

在 图 4-1 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 两 组 案例 效果 完全 相同 ; 图 (b) 和 图 (c) 分 别 为 单 
击 第 1、2 组 子 容器 的 效果 。 由 图 4-1 可 见 第 1 组 父子 容器 均 变 为 红色 ， 而 第 2 组 仅 有 子 容器 
变 为 红色 ， 因 此 hover-stop-propagation 生效 。 


4.2.2 scroll-view 
<scroll-view> 是 可 滚动 视图 区 域 ， 对 应 的 属性 如 表 4-4 所 示 。 


表 4-4 scroll-view 组 件 属 性 
属 性 名 说 明 
scroll-x 允许 模 问 深 动 
scroll-y 允许 纵 问 深 动 
upper-threshold 中 顶部 /左边 多 远 时 (单位 为 px) 触发 scrolltoupper 事件 
lower-threshold mbe 距 底 部 /右边 多 远 时 (单位 为 px) 触发 scrolltolower 事件 
scroll-top 设置 坚 回 滚动 杀 位 置 


scroll-left Number ”|  ” | 设置 横向 深 动 条 位 置 


值 应 为 菜子 元 素 id (id 不 能 以 数字 开头 ) 。 设 置 哪个 方向 
可 滚动 ， 则 在 哪个 方向 滚动 到 该 元 素 
scroll-with-animation 在 设置 滚动 条 位 置 时 使 用 动画 过 渡 


scroll-into-view String 
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续 表 
属 性 名 


型 | 避 兴 全 说 
enable-back-to-top Boolean 3 Ee 申 击 项 部 状态 本 、 0 
\ 项 部， 只 支持 竖 向 
bindscrolltoupper EventHandle 深 动 到 顶部 /左边 会 触发 scrolltoupper 事件 
ee 深 动 到 的 部 /右边 会 触发 scrolltolower 事件 
深 动 时 触发 ，event.detail = {scrollLeft, scrollTop. 
加 省 scrollHeight, scroll Width, deltaX. deltaY》 


bindscrolltolower EventHandle 


bindscroll EventHandle 


注意 : 在 使 用 坚 向 滚动 时 需要 给 <scroll-view> 一 个 固定 高 度 ， 并 且 通 过 WXSS 设置 
height. 


【 例 4-2】 视图 容 希 组 件 scroll-view 的 简单 应 用 
WXML (pages/demo01/scroll-view/scroll-view.wxml) 的 代码 卢 段 如 下 : 


1 。 <view Class='title'»>l. 视图 容器 SCIOJ 1 一 IEW 的 简单 应 用 </view> 
27. <VIiew Class='demo—box'> 


人 <view class='title'>(1) 纵 同 深 动 </view> 人 饮 频 讲解 
4. <SCroll-—view scroll-—v> 

a <view Class='scroll-item Vv'> 第 1 页 </view> 

6. <View Class—="SCroll item y'>3 和 第 2 页 </wiew> 

ee <view class='scroll-item-y'> 第 3 由 </view> 

8 - </Scroll—view> 


9. </view> 

10.<view class='demo—box'> 

11. <view class='title'>(2) 横 问 淤 动 </view> 
12. <SCroll-—-view SCcroll-x> 


下 < TILEW class='scroll-item-x'> 第 1 网 </view> 
14. <YVl1EW class='scroll-item-x'> 第 2 页 </view> 
ec <VY1EW class='scroll-item-x'> 第 3 页 </view> 


16. </scroll—view> 
17.</viewy> 


WXSS (pages/demo01/scroll-view/scroll-view.wxss) 的 代码 厂 段 如 下 : 


1 。 scroll—view I 

ee width: 100%;» 

a height: 300rpx; 

4. white—space: nowrap; 

D- } 

6 SEroll= Titem wl 

Te height: 300rpx; 

各 line—height: 300rpx; 

ne font—size: 30pt;s 

10- background—color: lightblue; 
| 

12..s5croll—item x { 

13. width: 100%; 

14. height: 300rpx; 

15. line—height: 300rpxs 

下 本 二 “font sizes 300Eks 

li. background—color: lightcoral; 
i138- displavyv: inline block:; 

下 号 二 
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运行 效 末 如 图 4-2 所 示 。 
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第 4 草 小 程序 组 件 第 4 章 小 程序 组 件 
1. 视图 容 鄙 scroll-view 的 简单 应 用 1. 视图 容器 scroll-view 的 简单 应 用 


(1) 纵向 深 动 (1) 纵向 党 动 


第 4 贝 
第 1 贝 


A 


(2) 模 向 滚动 (2) 模 向 滚动 


名 微 信 小 程序 开发 零 基 础 入 门 名 微 信 小 程序 开发 零 基 础 入 门 


(a) 页 面 初 始 效果 (b) scroll-view 湾 动 过 程 
图 4-2 视图 容器 组 件 scroll-view 的 简单 应 用 


【代码 说 明 】 

本 示例 在 scroll-view.wxml 中 人 设置 了 两 组 <scroll-view> 组 件 ， 分 别 使 用 属性 scroll-y 和 
scroll-x 定义 其 纵向 和 横向 滨 动 ,在 每 组 <scroll-view> 内 部 均 包含 3 个 <view> 用 于 标识 第 几 页 。 

在 图 4-2 中 , 图 (a) 为 页 面 初始 效果 ,此 时 都 显示 第 一 个 <view> 的 内 容 ; 图 (b) 为 滚动 过 程 ， 
由 该 图 可 见 分 别 实现 了 纵向 和 横 同 深 动 效果 。 


4.2.3 swiper 


<swiper> 也 称 为 滑 块 视图 容器 ， 通 常 使 用 该 组 件 制作 幻灯 片 切 换 播 放 效 果 。<swiper> 组 
件 的 可 用 属性 如 表 4-5 所 示 。 


表 4-5 swiper 组 件 属性 


属 性 名 最 低 版 本 
indicator-dots 是 否 显 示 太 板 指示 所 
indicator-color 11.0 
indicator-active-color 当前 选中 的 指示 点 闫 色 1.1.0 
autoplay 
cumrent Number | 0 | 当前 所 在 滑 块 的 index 


En current 被 同时 指定 和 


interval 自动 切换 时 间 间隔 
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续 表 
属 性 名 最 低 版 本 
duration 请 动 动 团 时 长 
et 是 否 采用 衔接 滑动 
| 滑动 方向 是 否 为 纵 癌 


previous- 败 前 边 距 , 可 用 于 露出 前 一 项 的 一 小 部 
margin 分 ， 接 收 px 和 px 值 
加 后 边 距 , 可 用 于 露出 后 一 项 的 一 小 部 
Next-margin String OpX 分 ， 接 收 px 和 rpx 值 1.9.0 


display-multiple-items Number |1 同时 显示 的 请 块 数量 1.9.0 


征 否 跳 过 未 时 示 的 请 块 布 局 ， 设 为 


ee true 可 优化 复杂 情况 下 的 滑动 性 能 ，| 1.9.0 
但 会 丢失 隐藏 状态 消 块 的 布局 信息 
current 改变 时 触 友 change 事件 ， 
bindchange EventHandle event.detall = {current: current, 


source: source} 


a 动画 结束 时 触发 animationfinish 事 
ipominniontpi | Petde | | venrdetal 加 2 


从 1.4.0 开始 ，change 事件 返回 的 detail 中 包含 一 个 source 字段 ， 表 示 导 致 变更 的 原因 ， 
可 能 信 如 下 。 

e autoplay: 目 动 播放 导致 swiper 变化 。 

e。 touch: 用 户 滑动 引起 swiper 变化 。 

。 其 他 原因 用 空 字符 串 表 示 。 

例如 : 


<swiper indicator-dots autoplay></swiper> 


上 述 代码 表示 希望 实现 一 个 带 有 指示 点 的 滑 块 视图 容器 ， 并 且 需 要 自动 播放 。 但 是 仅 作 
这 一 句 代 码 是 不 够 的 ，<swiper> 标 签 必须 配合 <swiper-item> 组 件 一 起 使 用 ， 该 组 件 才 是 用 于 
切换 的 具体 内 容 。 

在 <swiper-item> 中 可 以 包含 文本 或 图 片 ， 其 宽 / 高 默认 为 100%。 需 要 注 
意 的 是 ，<swiper 组 件 中 可 以 直接 放置 的 只 有 <swiper-item> 组 件 ， 否 则 会 导 

【 例 4-3】 视图 容器 组 件 swiper 的 简单 应 用 

WXML (pages/demo01/swiper/swiper.wxml) 的 代码 片段 如 下 : 


1 。 <view Class="title'»>]l. 视图 容器 SW1ipPer 的 简单 应用 < /view> 

2. <View Class="demo—box'> 

3. <view class="'title'> 使 用 带 文 字 的 view 作为 翻 页 内 容 </view> 
4. <SwlIPe lilndicator—dots autoplay interval=’'6000" duration=" 3000 > 
Ee <SWiper— ltem> 

6. <View Class="swiper— litem' > 第 1 页 </view> 

ee </swiper-item> 

只 二 <SWiper—item> 

> <View Class=" swiper——litem’' > 2 网 < /WieW> 

10. </swiper-item> 

有 <SwWwiper—litem> 

中 <View Class="swiper—litem"' > 第 3 页 </view> 

i </swiper-item> 


14. </swiper> 
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15.</viewy> 


WXSS (pages/demo01/swiper/swiper.wxss) 的 代 人 码 古 段 如 下 : 


1. .swiper—itemit 

2 height: 300rpx; 

Ee line—height: 300rpx; 

4. background—color: lightblues; 
2 font—size: 30pt;s 

6- |] 

1. swiperl 

3 height: 300rpx; 

3. 1 


运行 效果 如 图 4-3 所 示 。 
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1. 视图 容器 swiper 的 简单 应 用 


使 用 带 文字 的 view 作 为 翻 页 内 容 使 用 带 文 字 的 view 作 为 翻 页 内 容 


第 1 页 第 2 页 


使 用 带 文字 的 view 作 为 翻 页 内 容 


第 3 页 
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(a) swiper 第 1 页 效果 (b》swiper 第 2 页 效果 (c) swiper 第 3 页 效果 
4-3 ”视图 容器 组 件 swiper 的 简单 应 用 


【代码 说 明 】 

本 示例 在 swiper.wxml 中 设置 了 一 个 可 以 目 动 播放 的 <swiper> 组 件 , 每 阳 6 秒 翻 页 且 翻 页 
动画 效果 持续 3 秒 完 成 。 该 组 件 内 部 包含 了 3 组 <swiper-item>， 且 在 每 组 <swiper-item> 中 均 
使 用 <view> 组 件 配合 文本 内 容 标记 当前 是 第 几 页 。 在 swiperwxss 中 设置 <swiper> 和 
<swiper-item> 肘 局 度 均 为 300mpx， 其 中 <swiper-item> 还 外 加 30 号 字体 、 浅 览 色 背景 以 及 行 局 
300rpx 的 样式 效果 。 

在 图 4-3 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 默认 显示 第 1 页 内 容 ; 图 bb) 和 图 (c) 分 别 显示 第 
2、3 页 内 容 ， 由 该 图 可 见 指示 扩 会 随 者 翻 页 友和 生变 化 。 


4.2.4 movable-view 


Rh 图 容器 ， 该 组 件 可 以 在 页 面 中 拖 搜 滑动 。 注 意 ， 该 组 件 
能 独立 使 用 ， 必 须 放 在 <movable-area> 组 件 中 有 旦 是 直接 子 市 点 ， 人 耕 则 无 效 。 
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movable-area> 组 件 是 <movable-view 二 的 可 移动 区 域 冰 围 ， 其 属性 如 表 4-6 所 示 。 


表 4-6 movable-area 组 件 属性 


属性 名 最 低 版 本 


1 ] 加 当 里 面 的 movable-view 设置 为 支持 双 指 缩放 时 ， 设 置 此 值 
sca earea | Booean | 人 as | 可 将 缩放 手势 生效 区 域 修改 为 整个 movable area 


1.9.90 


注意 : movable-area 可 以 自 定义 width 和 height 属性 ， 其 默认 值 均 为 10px。 


<movable-view> 组 件 的 属性 如 表 4-7 所 示 ， 该 组 件 文 持 的 最 低 厂 本 为 1.2.0。 


表 4-7 movable-view 组 件 属 性 


属 性 名 最 低 版 本 
ao movable-view 的 移动 方 回 ， 属 性 佣 有 all、vwertical、 


direction Strine none 
8 horizontal 、none 


inertia movable-view 是 于 市 有 惯性 


out-of-bounds 超过 可 移动 区 域 后 ，movable-view 是 否 还 可 以 移动 
Ne se 定义 X 轴 方 向 的 偏 移 ， 如 果 x 的 值 不 在 可 移动 范围 

x Number / String 内 ， 会 日 动 移动 到 可 移动 范围 ， 改 变 x 的 值 会 触发 

动 转 

定义 YY 轴 方 回 的 仿 移 ， 如 果 y 的 值 不 在 可 移动 沁 围 
y / String 内 ， 会 日 动 移动 到 可 移动 范围 ， 改 变 y 的 值 会 触发 

动画 
Re 阻尼 系数 ， 用 于 控制 或 ?改变 时 的 动画 和 过 界 回 弹 

的 动画 ， 值 越 大 移动 越 快 
friction 
disabled 1.9.90 
Ee ht SS Sg 
scale-min 1.9.90 
scale-max 1.9.90 
scale-value 让 全 并， 取信 范围 为 0.3~10 1.9.90 
animation Se 否 便 用 动 男 2.1.0 


i event.detail = {xX: xX, y: y。 

source: source}， 其 中 source 表示 产生 移动 的 原因 ， 
bindchange EventHandle 但 可 以 为 touch( 拖 动 ) 、touch-out-of-bounds (超出 | 1.9.90 

移动 范围 ) .outofbounds( 超 出 移动 范围 后 的 回 弹 )、 

friction〈 惯 性 ) 和 衬 衬 侍 串 〈setData ) 


缩放 过 程 中 触发 的 事件 ，event.detail = {xX: XxX, y: y, 
bindscale EventHandle scale: scale}， 其 中 x 和 yy 了 字段 在 2.1.0 之 后 开始 支持 | 1.9.90 
返回 


注意 事项 如 下 : 

(1) movable-view 必须 设置 width 和 height 属性 ， 奉 不 设置 默认 为 10px。 

(2) movable-view 默认 为 绝对 定位 ， top 和 left 属性 为 UPX。 

(3) 当 movable-view 小 于 movable-area 时 ，movable-view 的 移动 沁 围 是 在 movable-area 内 。 
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(4) 当 movable-view 大 于 movable-area 时 ，movable-view 的 移动 泄 围 必 
顷 包 含 movable-area (X 轴 方 回 和 立轴 方 回 分 开车 谍 )。 

【 例 4-4】 视图 容器 组 件 movable-view 的 简单 应 用 

WXML (pages/demo01/movable-view/movable-view.wxml) 的 代码 片段 如 下 : 


1 。 <vIiIeEw CasSS= 七 1 七 1 人 > 视 图 容器 movable—view 的 向 里 应 用 < /view> 

2. <Vliew Class='demo—box'> 

3 <Vlilew Class='"'title'>(l)movable—view 在 movable-area 内 </view> 
44. <movable—area> 

局 <movable-view id='mv0Ol' direction='all'></movable—view> 

6 </movable-area> 

1. </view> 

8. <view Class='demo—box'> 

= <V1iEeW class='title'>(2)movable-view 超出 movable-area</view> 
10. <movable-area> 

11; <movable—view id='mv0O2'direction="'all'></movable—-view> 
12. </movable—-area> 

13.</view> 

14.<view Class="'demo—box'> 

15. <view Class="title"> (23) 可 缩放 的 movable—area</view> 

1l16. <movable—area Scale—area> 

TT7s <movable—-view id='mv03' direction='all' scale></movable—-view> 
18. </movable-—-area> 

19.</viewy> 


WXSS (pages/demo01/movable-view/movable-view.wxss) 的 代码 片段 如 下 : 


1. movable—areal 

2 width: lo0rpx; 

感人 height: lo0rpx; 

4 background—color: lightblues 
he margin: 0 auto; 

ee- } 

1. movable—viewl 

8 background—color: red; 


23. 1} 

10.#mv0Ol1,#mv0O31 

11- width: oO0rpx; 
i120 heiqhti: m0rpaxs 
| 

14.#mvO21{ 

15. width: 180rpxs 
16. height: 180rpx; 
1171.1} 


运行 效果 如 图 4-4 所 示 。 

【代码 说 明 】 

本 示例 包含 了 3 组 效果 ， 即 <movable-view> 的 尺寸 在 <movable-area> 范围 内 、 
<movable-view 二 有 鸭 尺 寸 大 于 <movable-area> 的 沁 团 、<movable-Vview> 的 尺寸 可 纵 放 。 在 
movable-view.wxss 中 设置 <movable-area> 统 一 样式 为 贤 / 局 均 为 1S0rpx、 浅 监 色 育 景 ; 设置 
<movable-view> 统 一 样式 为 红色 背景 , 且 第 1 组 和 第 3 组 中 的 <movable-view> 宽 /高 均 为 SO0rpx、 
第 2 组 中 的 <movable-view> 览 /高 均 为 180rpx。 在 movable-view.wxml 中 为 <movable-view> 使 
direction 一 all' 属 性 表示 人 允许 在 各 方 回 移动 ， 特 别 为 第 3 组 <movable-view> 设 置 scale 属性 ， 
表示 允许 放大 、 纵 小 。 
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(1) movable-view 在 movable-area 内 


(2) movable-view 超 出 movable-area 


(3) 可 缩放 的 movable-area 
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(a) 页 面 初始 效果 


生生 二 NeChat 全 15:35 1003% 


例题 DEMO “0 


第 4 章 小 程序 组 件 
1. 视图 容 吕 movable-view 的 简单 应 用 


(1) movable-view 在 movable-area 内 


(2) movablesy ovable-area 


Te 


Ts 


(3) 可 缩放 的 movable-area 
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(c) 第 2 组 移动 效果 


O 
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1. 视图 容 暴 movable-view 的 简单 应 用 


(1) movable-view 在 movable-area 内 


国 一 


(2) movable-view 超 出 movable-area 


(3) 可 缩放 的 movable-area 
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(b) 第 1 组 移动 效果 
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(1) movable-view 在 movable-area 内 


(2) movabl ovable-area 


(d) 第 3 组 放大 效果 


图 4-4 视图 容器 组 件 movable-view 的 简单 应 用 


100% [ml 
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4.2.5 cover-vlew 


<cover-view>> 是 可 敌 订 在 原生 组 件 上 的 文本 视图 容 磊 ， 可 徐 订 的 原生 组 件 包括 map、 
Video、canvas、camera、live-player、live-pusher 等 。 其 内 部 只 人 允许 散人 盈 使 用 <cover-view>、 
<coveI-image> 和 <button>。 访 组 件 的 属性 如 表 4-8 所 示 。 


表 4-8 ”cover-view 组 件 属性 


注意 : 该 组 件 从 1.4.0 版 本 开始 支持 。 


盖 在 原生 组 件 上 的 图 片 视图 容器 ， 可 覆盖 的 原生 组 件 与 


<cover-view 二 > 相同。 该 组 件 可 以 直接 使 用 或 被 散人 大 在 <cover-view> 中 ， 其 属性 如 表 4-9 所 示 。 


<cover-image> 是 可 黎 


表 4-9 cover-image 组 件 属性 


属性 名 最 低 版 本 


图 标 路 径 , 文 持 临 时 路 径 、 网 络 地 址 (从 1.6.0 版 本 开始 文 持 )， 


暂 不 支持 base64 格式 
bindload 图 片 加 载 成 功 时 触发 2.1.0 
binderror 图 片 加 载 失 败 时 触发 2.1.0 


注意 : 该 组 件 也 从 1.4.0 版 本 开始 支持 。 


【 例 4-S】 视图 容器 组 件 cover-view 的 简单 应 用 
WXML (pages/demo01/cover-view/cover-view.Wxml) 的 代码 请 段 如 下 : 


二 ol 
四 DE mA 


.<View class='title'>1 .视图 容器 cover-view 的 简单 应 用 </view> 饮 频 讲解 
. <V1iew Class="'demo—box'> 
<view Class='title"'» 在 地 图 上 放 明 cover_view</view> 
<map> 
<COVEeEIr—VIeW> 
<Cover-view>Cover-View</cover—-view> 
<COVer—-image src='/images/demo01l/house.png'></cover-image> 
<button type='"pPrimary'" SizZe~="mini'’ > 这 是 按钮 </button> 
</cover—-view> 
0. </map> 
1 .</view> 


WXSS (pages/demo01/cover-view/cover-vilew.WXss) 的 代码 片段 如 下 : 


-mapi 
width: 100%; 
height: 600rpx; 

} 

. COVver—viewti 
width: 200rpx; 
background—color: lightcyan; 
margin: 0 auto; 

} 


0 .cover—imagel 


一 
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11。.。 width: 100rpx; 
Ll2s ‘heiqht: L100rpxs 
13. margin: 0 autos; 
14-.1} 


运行 效果 如 图 4-5 所 示 。 


TTTT WeChat 全 16:13 


例题 DEMO 
第 4 章 小 程序 组 件 


1. 视图 容器 cover-view 的 简单 应 用 


在 地 图 上 放置 cover-view 


瑟 三 里 隶 机 


COVeT-View 二 由 


世贸 天 阶 
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图 4-5 视图 容 希 组 件 cover-view 的 简单 应 用 


【 代 人 码 襄 明 】 


本 示例 在 cover-view.wxml 中 放 管 了 一 个 <map> 组 件 用 于 显示 扶 认 地 图 画面 , 并 在 其 内 部 
放置 了 一 个 <cover-view> 用 于 履 善 在 地 图 上 方 。 在 这 个 <cover-view> 内 部 放置 了 =cover-view>、 
<covei-image> 和 <button> 组 件 ， 分 别 用 于 显示 目 定 义 内 容 的 文本 、 图 乒 和 按钮 效果 。 由 图 4-5 
可 见 ，<cover-view> 所 包含 的 内 容 可 以 窗 新 在 <map> 组 件 上 方正 确 显 示 。 


基础 内 容 组 件 主要 包含 4 种， 如 表 4-10 所 示 。 
表 4-10 基础 内 容 组 件 


组 件 名 称 说 
icon 图 标 组 件 
text 文本 组 件 
rich-text 再 文本 组 件 
进度 条 组 件 


progress 
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4.3.1 icon 
<icon> 为 图 标 组 件 , 开发 者 可 以 和 目 定 义 其 类 型 、 大 小 和 颜色 。 该 组 件 对 应 的 属性 如 表 4-11 
所 示 。 
a 4-11 icon — 


属性 多 训 
i 羡 和 标的 闫 型 
i eg | | 
mm | ”coor |] ”无 | 网球 交大 全 coored 
不 同 type 属性 值 对 应 的 样式 ， 如 表 4-12 所 示 。 


表 4-12 icon 组 件 的 type 属性 值 对 应 的 样式 


type 属性 值 “| 图 标 样式 说 ” 朋 
ee 成 功 图 标 ， 用 于 表示 操作 顺利 完成 ， 也 出 现在 多 选 控件 中 ， 表 示 已 经 选中 


z 本 时 不 市 圆圈 样式 的 成 功 图 标 , 用 于 表示 操作 顺利 完成 , 也 出 现在 弗 选 控件 中 ， 
SUCCeESS-DO-ClTCI¢ 表示 已 经 选 中 


”| 提示 图 标 ， 用 于 表示 信息 提示 
是 -中 警告 图 标 ， 用 于 提醒 需要 注意 的 事件 
等 竺 图标， 用 于 表示 事务 正在 处 理 中 
ea 取消 图 标 ， 用 于 表示 关闭 或 取消 
download 下 载 图 标 ， 用 于 表示 可 以 下 载 


() | 搜索 图 标 ， 用 于 表示 可 搜索 
> | 清空 图 标 ， 用 于 表示 清除 内 容 


例如 声明 一 个 红色 、40 像 系 大 小 的 警告 图 标 ，WXML 代码 如 下 : 


<icon tvpe="warn” size="40"™" color="red"></icon> 


如 果 有 多 个 图 标 需 要 批量 生成 ， 可 以 事先 在 对 应 的 JS 文件 中 用 data 记录 数据 ， 然 后 在 
WXML 文件 中 配合 使 用 <block> 标 签 。 
例如 依次 生成 红 、 黄 、 蓝 色 的 信息 图 标 ，WXML 代码 如 下 : 


。 <VIeW> 
<block wx:for="{{iconcolor}}"> 
<icon tvpe="info™ color="{{item}}"/> 
</block> 
. </vVview> 


On 


此 时 配套 的 JS 代码 如 下 : 


- Page (li 
data: I 
iCOoOnColor: | red'y vellows: "blue"l| 


心 Lu ho 靖 


- }) 
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【 例 4-6】 基础 内 容 组 件 icon 的 简单 应 用 
WXML (pages/demo02/icon/1icon.wxml) 的 代码 片段 如 下 : 


1. <view class='title'>2 .基础 组 件 icon 的 简单 应 用 < /view> 
2. <View Class='demo—box'> 


二 <View Class='title'>(1) 内 容 的 变化 </view> 视频 讲解 
4. <block wx:for="{{ijconType}}'> 
i <icon tvype="{{item}}" size="'36" /> 


6. </bplock> 

1. </view> 

38. <view Class='demo—box'> 

ee <Vliew Class='title'> (2) 颜色 的 变化 </view> 
10. <block wx: for=s" {{iconColoriilt"™> 

I <icon tvype="info™ color="{{item}}™ size="36" /> 
12. </block> 

13.</vVview> 

14.<view Class="demo—box'> 

12- <Vview Class='title' >(3) 大 小 的 变化 </view> 
16. <block wx:for=s="{{iconSizel}}"> 

17. <icon type="info™ size="{{item}}™" /> 
18. </block> 

19.</view> 


JS (pages/demo02/icomicon.js) 的 代码 片段 如 下 : 


1. Page l(t{ 

a data: { 

: 1conType: | SUCcCess ys “SUCCESSs no Circle ys "intoy WAarm ys "waliting's 
'icancel', ‘download’', Search" "clear'l|, 

= 1conColor:['red'y, 'orange'y, yellow', Green'  CYyan' blue ， PurPle | ， 

加 i1conSsize: [20,25, 30,35, 40,45,501 

Be }, 


运行 效果 如 图 4-6 所 示 。 
16:06 
例 | 晤 DEMO 
第 4 草 小 程序 组 件 
2. 基础 组 件 icon 的 简单 应 用 
(1) 内 容 的 变化 


O0000. 


(2) 颜 色 的 变化 


区 溉 1 
le 


。 i 


(3) 大 小 的 变化 


oo00000 
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图 4-6 基础 内 容 组 件 icon 的 简单 应 用 


于 记录 图 标的 类 
循环 实现 批量 生成 多 个 标签 组 件 的 效果 。 由 图 4-6 可 见 ， 图 标的 类 
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【代码 说 明 】 

本 示例 在 icon.js 的 data 中 设置 了 3 个 数组 ， 即 iconType、iconColor、iconSize， 分 别 用 
4、 图 标的 颜色 和 图 标的 大 小 ;在 icon.wxml 中 使 用 <block> 标 签 配合 wx:for 
型 、 闫 色 和 大 小 均 可 以 日 


由 变化 。 
4.3.2 text 


text 为 文本 组 件 ， 该 组 件 对 应 的 属性 如 表 4-13 所 示 。 
表 4-13 text 组 件 属性 


属 性 名 最 低 版 本 
selectable 文本 是 否 可 选 1.1.0 
i 显示 连续 空格 14.0 
decode 1.4.0 


例如 生成 一 个 内 容 可 选 的 文本 组 件 ， 代 码 如 下 : 


<text selectable> 这 一 段 测试 文本 </text> 


I 名 必 Po 户 


space 属性 值 的 具体 介绍 如 表 4-14 所 示 。 
表 4-14 text 组 件 的 space 属性 值 


值 说 明 

ensp 中 文字 从 空格 一 半 大 小 
emsp 中 文字 从 空格 大 小 

nbsp 根据 字体 设置 的 空格 大 小 


(1) decode 可 以 解析 的 有 &nbsp:、&lt:、 区 gt: 、&amp:、&apos;:、 儿 ensp:、 多 emsp:。 
(2) 各 个 操作 系统 的 空格 标准 并 不 一 致 。 : 
(3) <text/> 组 件 内 只 文 持 <text/> 缮 万 。 

(4) 除了 文本 厄 点 以 外 的 其 他 市 点 都 无 法 长 按 选 中 。 
【 例 4-7】 基础 内 容 组 件 text 的 简单 应 用 

WXMI (pages/demo02/textbtextwxml) 的 代码 片段 如 下 : 视频 讲解 


. <view class='title'>2 .基础 组 件 text 的 简单 应 用 </view> 


。 <VIew Class='"'demo—box'> 


<view class-'title'>(1) 文本 可 选 </view> 
<text selectable> 这 是 一 段 长 按 可 以 选择 的 文本 内 容 。</text> 


. </view> 
。 < 过 leW Class='demo—box'> 


<view class='title'>(2) 空格 显示 形式 </view> 
<text> 这 段 代 码 不 允许 连续 显示 空格 。</text> 
<text space="'ensp' > 这 段 代码 中 文字 符 空 格 一 半 大 小 。 </text> 


10. <text space='emsp'> 这 上 段 代 公 中 文字 符 空 格 大 小 。< /text> 

11. <text space='nbsp'> 这 上 段 代 公 根据 字体 设置 的 空格 大 小 。</text> 
12.</vVview> 

13.<view Class="'demo—box'> 

14. <view class='title'>(3) 六 本 解码 </view> 
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de <text> 无 法 解析 &nbsp; &lt; &ot; &amp; &apos; &ensp; &emsp;</text> 


16. <text decode> 可 以 解析 gnbsp; &lt; &gqt; &amp; &apos; &ensp; &emsp;</text> 
17.</view> 


WXSS (pages/demo02/text/text.wxss) 的 代码 如 下 : 


1. textl! 

2 margin: lorpx; 

i Padding: lorpx; 

4. border: lrpx solid silver; 
3 display: block; 

6 font—size: lOpt; 


运行 效果 如 图 4-7 所 示 。 


TTTT RUSE 16:19 


本 重量 重量 人 EC at 全 16:16 
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2. 基础 组 件 text 的 简单 应 用 


(1) 文本 可 选 


lb (1) 文本 可 选 


这 是 一 段 长 按 可 以 选择 的 文本 内 容 。 这 是 “地 长 按 可 以 选择 的 文本 内 容 。 


(2) 空格 显示 形式 [2) 空格 显示 形式 


这 段 代码 不 允许 连续 显示 空格 。 这 段 代 码 不 允许 连续 显示 空格 。 


这 段 代码 中文 字符 空格 一 半 大 小 。 这 段 代码 中文 字符 空格 一 半 大 小 。 


这 段 代 码 中 文字 符 空格 大 小 。 这 段 代 码 中 文字 符 空格 大 小 。 


这 段 代 码 “根据 字体 设置 的 空格 大 小 。 这 段 代 码 ”根据 字体 设置 的 空格 大 小 。 


(3) 文本 解码 (3) 文本 解码 
无 法 解析 &nbsp; &ilt; &gt; &amp; &apos; 


无 法 解析 &nbsp; &lt; &gt; &amp; &apos; 
Qensp; &emsp; 


Qensp; &emsp, 


可 以 解析 < > & 可 以 解析 < > & 
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(a) 页 面 初始 效果 (b) 长 按 可 选择 第 一 段 文本 内 容 
图 4-7 基础 内 容 组 件 text 的 简单 应 用 


【代码 说 明 】 

本 示例 在 text.wxml 中 放置 了 3 组 案例 ， 即 文本 可 选 、 空 格 显 示 形 式 和 文本 解 伺 。 其 中 ， 
第 1 组 使 用 selectable 属性 实现 了 <text> 文 本 内 容 可 选 效 果 ， 第 2 组 包含 了 4 个 <text> 组 件 ， 
分 别 用 于 验证 同 梓 的 4 个 连续 中 文 空格 的 显示 效 来 ; 第 3 组 包含 了 两 个 <text> 组 件 ， 分 别 用 
于 验证 特殊 符号 〈&nbsp:、&lt、&gt、&amp:、&apos:、&ensp:、&emsp:) 的 解 公 效果 。 

为 了 更 清晰 地 显示 效果 , 在 text.wxss 中 为 <text> 组 件 设 置 了 内 /外 边 距 为 15rpx、 带 有 1lrpx 
时 的 银色 实 线 边框 、 块 级 元 系 显 示 以 及 10 写字 的 样式 。 
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4.3.3 rich-text 
<Tich-text> 为 再 文本 组 件 ， 诅 组 件 对 应 的 属性 如 表 4-15 所 示 。 


表 4-15 rich-text 组 件 属性 


属性 最 低 版 本 
nodes i 点 列表 /HTML String | 140 


注意 : 该 组 件 由 基础 库 1.4.0 开始 支持 ， 低 版 本 需要 做 兼容 处 理 。 


例如 在 WXML 中 声明 一 个 宇文 本 组 件 ， 代 码 如 下 : 


<rich-—text nodes='{{nodes}}'></rich-text> 


其 中 {fnodes}} 为 自 定 义 名称 的 变量 ， 用 于 定义 HTML 内 容 。 

如 果 是 用 纯 字 符 串 (String 头 型 ) 描述 HTML 代码 ， 在 JS 中 表示 如 下 : 
1]. Page lt 
2 data: I 
二 nodes:'<div style="line—height: 60Px ColLor: red; ">Hello Worldl</div>" 
守 } 
2. 1) 

上 述 代码 表示 声明 一 个 <div> 元 素 ， 里 面 的 文字 内 容 是 “Hello World!”， 并 且 该 元 素 的 行 

局 为 60 像 系 (HTML 不 文 持 rpx 单位 ， 如 条 使 用 会 无 效 )、 字体 为 红色 。 其 运行 效 末 如 图 4-8 
所 示 。 


图 4-8 基础 内 容 组 件 rich-text 的 简单 应 用 


需要 注意 的 是 ， 官 方 声 明 nodes 属性 推荐 使 用 Array 头 型 ， 这 和 是 由 于 <rich-text> 组 件 会 将 
String 类 型 转换 为 Array 类 型 ， 所 以 在 内 容 比较 多 的 时 候 性 能 会 有 所 下 降 。 

Array 和 型 目前 文 持 两 种 点 ， 分 别 为 元 系 帮 氮 《node) 和 文本 蔬 氮 《text): 文 持 的 事 
件 有 tap、touchstart、touchmove、touchcancel、touchend 和 longtap。 

元 素 节点 

当 type=mode' 时 为 元 叉 世 点 效果 ， 相 关 属 性 如 表 4-16 所 示 。 


表 4-16 元 素 节 点 (type='node') 属性 一 览 表 
属性 备注 
name 标签 名 支持 部 分 受信 任 的 HTML 节点 
attrs 支持 部 分 受信 任 的 属性 ， 遵 循 Pascal 命名 法 


children | 。 子 节点 列表 结构 与 nodes 一 致 


注意 : 元 素 节 点 为 默认 效果 ， 可 以 省 略 type 类 型 不 写 。 
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文本 节点 
当 type='text 时 为 文本 节点 效果 ， 相 关 属 性 如 表 4-17 所 示 。 


表 4-17 文本 节点 (type='text') 属性 
属 性 备注 


注意 : 文本 节点 不 支持 样式 效果 ， 只 用 于 显示 纯 文本 内 容 ， 但 可 以 与 元 素 节点 配合 
使 用 。 


因此 ， 上 面 的 例子 可 以 重新 用 数组 〈Array 类 型 ) 描述 ， 将 JS 代码 改写 如 下 : 


1. PEage(t 

po data: I 

二 nodes 区 | 

Ee name a 

Ee attrs: [| 

6. stvile: “Tine herghts Unx: CoOlor: Tad 
i. } 

8. children: [Tf 

oe type: "text"', 

10. text: "Hello World!" 
11. 上 

12. }] 

13。. 1 

14.1}) 


这 里 将 元 系 避 与 文本 市 上 配合 使 用 ,使 用 元 系 太 后 的 attrs 属性 声明 样式 、 使 用 文本 市 
点 的 text 属性 声明 文字 内 容 ， 其 运行 结果 与 改 与 前 完全 一 梓 。 需 要 注 章 的 是 ， 元 系 节 点 全 局 
文 持 class 和 style 属性 ， 但 不 文 持 id 属性 。 

上 上面 的 示例 使 用 了 了 HTML 中 的 div 元 条 ， 除 此 之 外 还 有 42 个 HIML 常用 标 鱼 可 以 被 识 


别 。 受 信任 的 HTML 市 点 及 其 属性 如 表 4-18 所 示 。 
表 4-18 受信 任 的 HTML 节点 及 其 属性 
受信 任 的 节点 说 ”了 明 属 性 
a 超 链 接 
abbr 岁 写 


b 
blockquote 长 的 引用 
br 


dd 
del 
div 块 区 域 ， 文 档 中 的 节 

dl 
dt 
em 


fieldset 围 纪 表 单 中 元 素 的 边框 


一 


\D 
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受信 任 的 节点 说 明 属 性 
hl 一 h6 

hr 

1 

lme 

ins 

label 本 签 

legend fieldset 元 叉 的 标题 

ii 

ol 有 序列 表 start、type 

p 

q 和 短 的 引用 

span 文本 区 域 ， 文 档 中 的 市 

strong 粗 体 字 ， 强 调 文 本 

a 

sup 

db viath 

tbody 表格 的 主体 内 容 

td colspan、height、rowspan、width 
tfoot 表格 中 的 脚注 内 容 

th colspan、height、rowspan、width 
thead 表格 中 的 表 头 内 容 

tr 表格 中 的 行 


ul 
【 例 4-8】 基础 内 容 组 件 rich-text 的 简单 应 用 


WXML (pages/demo02/rich-textrich-text.wxzml) 的 代码 上 请 段 如 下 : 


. <VIiIeEw Class='title'»>2. 基础 组 件 rich text 的 简单 应 用 < /view> 
。 <VIew CasSss= aemo 一 口 O > 
<V1iew CasSsSs= 七 1 廿 1 人 > (1) 元 票 闻 点 《使 用 style 样式 </view> 


<rich-text nodes='{{nodes0l1}}'></rich-text> 


. </view> 
. <VIeEw Class='demo—box'> 


视频 讲解 


<Vliew Class='title'> (2) 元 素 节 扣 (使 用 class 伴 式 )》</view> 


<rich-text nodes="{{nodes02}}'></rich—text> 
</vVview> 


.过 WIN Class='"'demo—box'»> 


<view class='title'>(3) 文本 节点 </view> 
<rich-text nodes='{{nodes03}}'></rich-—text> 


</view> 


JS (pages/demo02ich-textrich-textjs) 的 代 但 上 请 段 如 下 : 


1. Page lt{ 

2 data: I 

3. nodes0l1: | 1!{ 

如 中 name: div', 

本 站 attrs: 1 

6. style: "line~height: 60px; COlor: red; font—-welight: lbold"' 
1. } 
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Se children: [ft 

号 lw Es 

10. ent Hello Worlid” 
} | 

下 ts 

I he nodes02: |I1 

14. name: div', 

下 号 二 attrs: 1 

16. lass- myoEwvlie, 

Ll }, 

下 中 children: [1 

1 type: "text", 

0 . text: "Hello World!' 
-1- } | 

2 } ] ， 

呈 号 noades03: <div style="1line—height: 60px; color: red;font—welight: 


Hello Worldl</div>" 
24 1]， 


WXSS (pages/demo02/rich-text/rich-text.wxss) 的 代码 如 下 : 


-mvyStylel 
color:red; 
line—height: oD0px; 
font—weight: bold; 
} 


ni 
| 


运行 效果 如 图 4-9 所 示 。 


重量 二 重 鲁 WEChat 过 17:10 100% [于] 


例题 DEMO “0. ©) 
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2. 基础 组 件 rich-text 的 简单 应 用 


(1) 元 素 节 点 (使 用 style 样 式 ) 


Hello World! 


(2) 元 和 紊 节 吕 (使 用 class 样 式 ) 


Hello World! 


(3) 文本 节点 


Hello World! 
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图 4-9 基础 内 容 组 件 rich-text 的 简单 应 用 


Po > 
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【代码 说 明 】 

本 示例 在 rich-text.wxml 中 放置 了 3 组 案例 , 即 元 素 节 点 (使 用 style 样式 )、 元 素 节 点 (使 
用 class 样式 ) 和 文本 点 ， 均 用 于 实现 同一 种 元 素 样 式 〈<div> 元 系 、 行 局 60 像 系 、 红 色 加 
粗 字体 )。 

其 中 ， 第 1 组 在 JS 中 使 用 style 属性 实现 元 素 样 式 ; 第 2 组 在 JS 中 使 用 class 属性 目 定 
义 myStyle 元 素 样 式 ， 并 且 在 WXSS 中 对 myStyle 进行 完善 ; 第 3 组 直接 使 用 String 类 型 实 

由 图 4-9 可 见 ， 这 3 种 不 同 的 表述 方式 可 以 实现 完全 一 样 的 运行 效 末 。 


4.3.4 progress 
progress 为 进度 条 组 件 ， 该 组 件 对 应 的 属性 如 表 4-19 所 示 。 


表 4-19 _ progress 组 件 属性 

属 性 名 最 低 版 本 
percent 百分比 0 一 100 
show-info 在 进度 条 右 侧 显示 百分比 
stroke-width | Number |6 | 进度 条 线 的 宽度 ， 单 位 为 px 
color 进度 条 的 颜色 (请 使 用 activeColor) 
activeColor Coor | 己 选 择 的 进度 条 的 颜色 
backeroundColor Coor | 未 选择 的 进度 条 的 颜色 
active 进度 条 从 左 往 右 的 动画 


上 次 结束 点 接着 播放 


例如 声明 一 个 目前 正 处 于 80% 刻 度 ， 并 且 宽 20px 的 进度 条 组 件 ，WXML 代码 如 下 : 


<progress percent="80™ stroke—width="20"™/ > 


【 例 4-9】 基础 内 容 组 件 progress 的 简单 应 用 
WXMI (pages/demo02/progress/progress.Wxml) 的 代码 睛 段 如 下 : 


1 。 < VIEW Class="title'»2?. 基础 组 件 Erogress 的 简单 应 用 < /view> 视频 讲解 
2. <View Class="'demo—box'> 

es <view class='title'>(1) 进度 条 右 侧 显示 百分比 </view> 

和 4. <PpPIogress percent='25°" show-info /> 

5. </view> 

6. <view Class='demo—box'> 

We <View class='title'>(2) 线 条 宽度 为 20px 的 进度 条 < /view> 
8. <PpPIrogress percent="50" stroke—width="20" /> 

9. </view> 

10.<view class="demo—box'> 

1 <view class='title>(3) 目 和 定义 颜色 的 进度 条 < /view> 

和 <pIrogress percent='80" activeColor='red" /> 
13.</view> 

14.<view Class="'demo—box'> 

15 <view class='title'>(4) 市 有 动 转 效果 的 进度 条 < /view> 

16 <progress PercCcent=7 1007 active /> 

17.</view> 


运行 效 末 如 图 4-10 所 示 。 
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2. 基础 组 件 progress 的 简单 应 用 


(1) 进 度 条 右 侧 显 示 白 分 比 


(2) 线 条 宽度 为 20px 的 进度 条 


(3 引 ) 目 定义 颜色 的 进度 条 


(4) 带 有 动画 效果 的 进度 条 
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图 4-10 ”基础 内 容 组 件 progress 的 简单 应 用 


【代码 说 明 】 

本 示例 依次 列举 了 4 种 进度 条 的 情况 ， 即 进度 条 右 侧 显示 百分比 、 线 条 宽度 为 20px 的 
进度 条 、 目 定义 颜色 的 进度 条 、 带 有 动画 效果 的 进度 条 。 需 要 注意 的 是 ， 用 户 只 能 使 用 
activeColor 属性 来 自 定 义 进度 条 的 选中 颜色 ， 单 独 使 用 color 属性 将 无 效 。 


0044 老人 


表单 组 件 主 要 有 10 种 ， 如 表 4-20 所 示 。 
表 4-20 ”表单 组 件 


组 件 名 称 说 明 
button 按钮 组 件 
checkbox 复 选 框 组 件 
form 表单 组 件 
input 和 输入 框 组 件 
picker 从 压 部 弹 起 的 深 动 选择 器 
picker-view 幅 入 页 面 的 深 动 选择 器 
radio 单 选 框 组 件 
slider 请 动 条 组 件 
switch 开 天 选 择 右 


textarea 文本 框 组 件 


第 4 章 小 程序 组 件 = 


4.4.1 button 


<button> 为 按钮 组 件 ， 鹰 组件 对 应 的 第 用 属性 如 表 4-21 所 示 。 
表 4-21 button 组 件 的 常用 属性 


属 性 名 最 低 版 本 
size 按钮 的 大 小 
type 按钮 的 样式 类 型 
plain 按钮 是 否 铁 空 ， 背景 色 透明 


disabled 


loading Boolean 名 称 前 是 否 带 loading 图 标 


用 于 <form= 组 件 , 单 击 分 别 会 触 友 <form=> 组 件 的 
Ce imp submit/reset 事件 


open-type 短信 开放 能 1.1.0 


Se 指定 按钮 按 下 去 的 样式 类 。 当 hover-class="none" 
NOVeI-ClASS 2 ULON-NOVer 时 ， 没有 单 击 态 效果 


hover-stop- ER 
指定 是 人 否 阻止 本 节点 的 祖先 入 点 出 现 单 击 态 1.5.0 
propagation 


hover-start-time 按 住 后 多 从 出 现 单 击 态 ， 单 位 为 ms 


hover-stay-time 手指 松 开 后 单 击 态 保留 的 时 间 ， 单 位 为 ms 


注意 : hover-class 的 属性 值 button-hover 默认 为 {background-color: rgba(0.0.0.0.1): 
opacity: 0.7;} 。 


size 属性 的 有 效 值 如 下 。 

e。 default: 默认 值 ， 按 钮 宽度 与 手机 屏 间 宽度 相同 。 

。 mini: 迷你 型 按钮 ， 按 钮 尺寸 、 字 号 都 比 普 通 按钮 小 。 
例如 : 


1. <button size='default'> 普 授 按 钮 </button> 
2 .<button size='mini'> 述 你 按钮 </button> 


其 效果 如 图 4-11 所 示 。 


首 遂 按钮 


述 你 按钮 


4-11 ”表单 组 件 button 的 size 属性 的 简单 应 用 


type 属性 的 有 效 值 如 下 。 

。 primary: 主要 按钮 ， 按 钮 为 绿色 效果 。 

。 default: 默认 按钮 ， 按 钮 为 普通 的 灰白 色 效 果 。 
。 warn: 和 警告 按钮 ， 按 钮 为 红色 效果 。 

例如 : 
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- <button 七 YPe= PEIImaTrYy >PTI1Imary 按钮 </button> 
- <button type="'default'"'>default 按钮 </button> 
. <button type—"'warn'>warn 按钮 </button> 


其 效果 如 图 4-12 所 示 。 


defaul|t 按 徊 


warn 按 钮 


图 4-12 ”表单 组 件 button 的 type 属性 的 简单 应 用 


form-type 属性 的 有 效 信 如 下 。 
e submit: 提交 表单 。 

® TeSet: 重 置 表 单 。 

例如 : 


. <button form-type="submit'" > 提交 按钮 </lbutton> 
. <button form-type="reset' > 重 置 按钮 </button> 


其 效果 如 图 4-13 所 示 。 


4-13 ”表单 组 件 button 的 form-type 属性 的 简单 应 用 


需要 注意 的 是 ， 这 两 球 按 钮 目前 只 提供 了 页 面 样式 效果 ， 具 体 功 能 需要 配合 <form> 组 件 


一 起 使 用 才 可 生效 ， 详 见 4.4.5 市 。 


feedback 


open-type 属性 的 有 效 值 如 表 4-22 所 示 。 
表 4-22 button 组 件 的 open-type 属性 值 


值 说 明 最 低 版 本 
contact 打开 客服 会 话 1.1.0 
share 触发 用 户 转 发 ， 在 使 用 前 建议 先 阅 读 使 用 指南 1.2.0 
getUserInfo 获取 用 户 信 息 ， 可 以 从 bindgetuserinfo 回调 中 获取 到 用 尸 信息 1.3.0 
getPhoneNumber | 获取 用 户 手 机 号 ， 可 以 从 bindgetphonenumber 回调 中 获取 到 用 户 信 息 1.2.0 
launchApp 打开 App， 可 以 通过 app-parameter 属性 设 定 回 App 传 的 参数 的 具体 说 明 1.9.5 


openSetting 打开 授权 设置 页 207 
打开 “意见 有 反馈” 页面 ， 用户 可 提交 反馈 内 容 并 上 传 日 志 ， 开 发 者 可 以 在 


2.1.0 


登录 小 程序 官 理 后 台 后 进入 左 侧 集 单 “ 客 服 反 馈 ” 页 面 获 取 到 反馈 内 容 


<button> 组 件 还 有 一 系列 属性 需要 配合 对 应 的 open-type 属性 值 才 可 生效 ， 相 天 属性 如 
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表 4-23 button 组 件 的 open-type 相关 属性 


属 性 名 
指定 返回 用 户 信息 的 语言 , zh_CN 为 简体 
lang 中 文 , zh_TW 为 壹 体 中 文 ， en 为 喘 文 。 其 
扑 认 值 为 en 
用 户 单 击 该 按钮 时 会 返回 获取 到 的 用 户 信 
bind getuserinfo 轧 ， 回 调 的 detail 数据 与 wxX.getUserImfo0O 返 
回 的 一 致 
sesslo0n-from 


send-message-title 


会 话 内 消息 卡片 的 标题 ， 默 认 值 为 当前 
标题 


send-message- 会 话 内 消息 卡片 单 击 时 跳 转 的 小 程序 路 
path | 径 ， 默 认 值 为 当前 分 享 路 径 

YeTd- i- ; 
we 会 话 内 消息 卡片 的 图 片 ， 默 认 值 为 截图 
ee 显示 会 话 内 消息 卡片 ， 默 认 值 为 false 
-AT 

bindcontact 客服 消 居 回调 


bindgetphonenumber 


获取 用 户 手 机 号 回调 


app-parameter 打开 App 时 问 App 传递 的 参数 
binderror 当 使 用 开放 能 力 时 友 生 错误 时 回调 


bindopen setting 


ID 下 


10. 
| 
Ls 


| 


14. 
LL 
16. 


在 打开 授权 设置 页 后 回调 


【 例 4-10】 表单 组 件 button 的 简单 应 用 


WXML (pages/demo03/buttombutton.wxml) 的 代码 片段 如 下 : 


.<View class='title'>3 .表单 组 件 button 的 简单 应 用 < /view> 
- <VLIEW Class='demo—box'> 


<view class='title'>(1) 迷 你 按钮 </view> 


open-type= 
"getUserInfto" 


open-type= 
"getUserInto" 


open-type= 
“Contact 
open-type= 
“Contact 
open-type= 
“Contact 
open-type= 
“Contact 
open-type= 
“Contact 
open-type= 
“Contact 
open-type= 
"getPhoneNumber" 
open-type= 
"launchApp" 
open-type= 
"launchApp" 
open-type= 
"openSetting" 


<button type="pIrimary" SiZe="mini’ > 主要 按钮 </button> 
<button type=" "default”" sizeQ= "mini’ > 这 要 按钮 < /button> 


<button type='warn’' Size="mini'" > 警告 按钮 </button> 


. </view> 
. <VIEeEw Class='demo—box'> 


<view Class='title'>(2) 按 钮 状态 </vVview> 
<button> 普 通 按 钮 </button> 
<button disabled> 禁 用 按钮 </button> 
<button loading> 加 载 按 钮 </pbutton> 
</view> 
view Class='demo—box'> 
<view class='title>1(31) 按钮 单 击 监听 </view> 


视频 讲解 


生效 时 机 。 ”| 最 低 版 本 


1.3.0 


1.3.0 


1.4.0 


1.3.0 


1.5.0 


1.5.0 


1.3.0 


1.5.0 


1.2.0 


hh 


1.9.3 


<button type="pPrimary" bindgetuserinfo="'getUserDetail" open-—type= ‘getUserInfo'»> 


四。 微 信 小 程序 开发 零 基础 入 门 、《2 


点 我 试 试 </button> 


17.</viewy> 


JS (pages/demo03/button/button.js 〉 的 代码 片段 如 下 : 


1]. Page l(t{ 

和 getUserDetail: functiont(e} { 

于 console.logl(e.detail .userIinfo) 
4. } 

3. }})} 


WXSS (pages/demo03/button/button.wxss) 的 代码 如 下 : 


1 。 buttont 
margin:10rpx; 


[5 


= 


运行 效果 如 图 4-14 所 示 。 
重重 要 重重 AeChat 全 17:59 


例题 让 EM 已 


第 4 章 小 程序 组 件 
3. 表单 组 件 button 的 简单 应 用 


(1) 迷你 按钮 


所 


(2) 按钮 状态 
首 通 按钮 


:加 载 按钮 


(3) 按钮 单 击 监听 


加 微 信 小 程序 开 皮 地基 础 入 门 


(a) 页 面 初 始 效果 
Console Sources Network Securty Audits Storage AppData Wxml Sensor Trace 


本 Filter Default levels ™ 


p fnickName: "WH", gender: 2, Language: "zh CN", city: "Wuhu", province: "Anhui", ..} 


> | 


(b) 单 击 按钮 后 在 Console 控制 台 获 得 当前 微 信 用 户 信 息 
图 4-14 表单 组 件 button 的 简单 应 用 


【 代 人 码 襄 明 】 


在 button.wxml 中 设置 了 3 组 效 末 ， 即 迷你 授 钮 、 普 过 按钮 的 不 同 状态 、 蛙 击 按钮 获得 
用 户 信 息 。 其 中 ， 第 1 组 使 用 size=mini 实 现 了 迷你 投 钮 效 末 :第 2 组 分 列 使 用 disabled 和 
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loading 属性 实现 按钮 禁用 和 加 载 动画 效果 ;第 3 组 为 按钮 追加 了 open-type='getUserInfo' 状 态 ， 
然后 使 用 了 目 定 义 函 数 getUserDetail0 获 取 用 户 信 息 。 在 buttonjs 中 设置 了 getUserDetail0 卫 | 
数 的 具体 内 容 ， 即 将 获得 的 微 信 用 户 信 息 打 印 输出 到 Console 控制 合 中。 

在 图 4-14 中 ， 图 (a 是 页 面 初 始 效 末 ， 其 中 第 2 组 中 的 loading 属性 会 在 按钮 文字 内 容 左 
边 形成 一 个 加 载 深 动 的 动画 效果 图 标 ， 图 (b) 为 单 击 了 第 3 组 中 的 按钮 后 的 效果 ， 此 时 会 触发 
getUserDetall0 国 数 ， 并 且 在 Console 控制 台 打 印 输 出 当前 的 微 信用 户 信 息 ， 包 括 微 信 尖 像 、 
昵称 、 性 别 、 所 在 省 市 等 内 容 。 


4.4.2 checkbox 


<checkbox> 为 多 选项 目 组 件 ， 往 往 需 要 与 <checkbox-group> 多 项 选择 涡 组 件 配 合 使 用 ， 
其 中 <checkbox-group> 首 尾 标签 之 间 可 以 包含 知 干 个 <checkbox> 组 件 。 
<checkbox-group> 组 件 只 有 一 个 属性 ， 如 表 4-24 所 示 。 


表 4-24 <checkbox-group> 组 件 属性 
属性 名 称 备注 
当 内 部 <checkbox> 组 件 选中 与 | 携 币值 为 eventdetail=fvalue:[ 被 选中 
否 发 生 改 变 时 触发 change 事件 | checkbox 组 件 value 值 的 数组 ]} 


<checkbox> 组 件 的 属性 如 表 4-25 所 示 。 


表 4-25 <checkbox> 组 件 属性 
属性 名 称 备 注 


Co 当 <checkbox-group>> 的 change 事件 被 
i 二 上 = | * 机 民风 、 eg 


checked 是 否 选 中 该 组 件 其 默认 值 为 false 
disabled 是 否 禁用 该 组 件 其 默认 值 为 false 
color 组 件 的 颜色 与 css 中 的 color 效果 相同 


例如 : 


<Checkbox—group> 
<Checkbox Value= apple checked /> 苹果 
<Checkbox value='banana' disabled /> 理 仍 
<Checkbox value='grape' /> 简 侈 
<checkbox value='lemon' /> 森 标 

. </checkbox—group> 


Ti 


其 效果 如 图 4-15 所 示 。 


苹果 和香 燕 区 多 本 模 


图 4-15 表单 组 件 checkbox 的 简单 应 用 


由 图 4-15 可 见 ,“ 革 末 ”选项 是 款 认 做 选中 状态 ,“ 理 焦 ” 选 项 是 茶 止 选 
【 例 4-11】 表单 组 件 checkbox 的 简单 应 用 
WXML (pages/demo03/checkbox/checkbox.wxml) 的 代码 片段 如 下 : 视频 讲解 


也 汪 ” 微 信 小 程序 开发 零 基础 入 门 


。 <VTeW Class="'demo—box'> 


< /View> 
</checkbox—-group> 
- </view> 


中] 中 部 请 
i 


- <V1IeEw Class="'title'»3. 表单 组 件 checkbox 的 简单 应 用 < /view> 


<view class='title'> 使 用 数组 批量 生成 选项 < /view> 

<Checkbox—group bjindchange="checkboxChange'> 
<Vliew Class='test" wx:for~='{{checkboxItemsi}}'" 
<Checkbox value="'{{item.value}}' checked='{{item.checked}}" />{{item.name}} 


JS (pages/demo03/checkbox/checkbox.js〉 的 代码 片段 如 下 : 


1. Page (ll 

下 data: { 

汪汪 checkboxItems: | 

4 { name: ' 笑 上 Value: "'apple" }, 

3 { name: value: ‘orange', checked: true”" 上 }， 
0. { name: : Value: “ Pear” }, 

oe { name: : Value: 'strawberry' }, 

8 . { name: value: "banana" },， 

过 加 { name: value: "grape”" 上， 

10. ] 

li. 上 > 

1l2. checkboxChange:functiont{(e) I{ 

13- console.1log ("checkbox 发 生变 人 化， 被 选中 的 值 是 : :+ e.detail. value) 
14. |] 

15.1) 


生硬 重重 NeChat 全 10:02 
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3. 表单 组 件 checkbox 的 简单 应 用 


使 用 数组 批量 生成 选项 


己 微 信 小 程序 开发 零 基础 入 门 


(a) 页 面 初 始 状 态 


TTTTETa at 全 10:04 


例题 DEMO 


第 4 章 小 程序 组 件 
3. 表单 组 件 checkbox 的 简单 应 用 


使 用 数组 批量 生成 选项 
苹果 
wv | 梅子 
梨子 
w 草莓 
香 能 
苦 萄 


加 微 信 小 程序 开发 零 基础 入 门 


Cb) 多 个 选项 被 选中 状态 


图 4-16 ”表单 组 件 checkbox 的 简单 应 用 


wx: key="item{ {index}}"'> 


checkbox 友 和 牛 变化 ， 


Console 


第 4 章 小 程序 组 件 性 已 


Sources Network Audits 


Application 


Securlty Storage AppData 
™ Filter 


秘 选 中 的 人 是 : 


Default levels ™ 


orange, strawberry 


(c) 多 个 选项 被 选中 时 Console 输出 的 内 容 


图 4-16 〈 续 ) 


【代码 说 明 】 

在 checkbox.js 的 data 中 设置 了 一 个 数组 checkboxItems， 用 于 记录 多 选 选 项 的 名 称 
(name) 值 (value) 以 及 初始 的 选中 状态 (checked )。 在 checkbox.wxml 中 使 用 <checkbox-group> 
标签 形成 多 选 组 ， 并 在 其 内 部 使 用 <view> 标 和 俭 配合 wx:for 循环 实现 批量 生成 多 个 checkbox 
组 件 的 效果 。 

为 达到 监听 选项 改变 的 目的 ， 在 <checkbox-group> 标 签 上 添加 属性 bindchange， 其 属性 
值 checkboxChange 为 自 定 义 函 数 名 称 。 然 后 在 checkboxjjs 中 人 退 加 该 函数 的 具体 内 容 ， 即 每 
次 被 触发 都 在 Console 控制 台 打 印 输出 最 新 选中 的 所 有 值 。 

在 图 4-16 中 ,由 图 (a) 可 见 页 面 初 始 显 示 效 果 成 功 识 别 了 选项 的 名 称 和 选中 状态 (默认 “ 橙 
子 ” 选 项 为 选中 效果 ); 由 图 (b) 可 见 允 许 手 动 进 行 多 选 ; 图 (c) 为 Console 控制 台 输 出 的 内 容 ， 
由 该 图 可 见 当 选项 被 改变 时 会 目 动 输出 所 有 被 选中 的 值 。 


4.4.3 nput 
<input> 为 输入 框 组 件 ， 其 属性 如 表 4-26 所 示 。 


表 4-26 <input> 组 件 属性 


属性 名 | 类 型 | 默认 和 值 说 明 


value sting | 输入 框 的 初始 内 容 

type input 的 类 型 

password Boolean 是 否 为 密码 关 型 

placeholder EE 输入 框 为 空 时 的 占 位 和 桂 

style 

placeholder- 

disabled ee 是 否 禁用 

maxlength |Number |140 | 最 大 输入 区 度 ， 设置 为 -1 的 时 候 不 限制 最 大 长 度 

0 二 指定 光标 与 键盘 的 距离 ， 单 位 为 px， 取 input 与 底部 的 距 
Number 离 和 cursor-spacing 指定 距离 的 最 小 值 作 为 光标 与 键盘 的 

了 距离 

auto-focus |Boolean 自动 聚焦 ， 拉 起 键盘 〈 即 将 废弃 ， 请 直接 使 用 focus) 

focus 获取 焦点 


微 信 小 程序 开发 零 基础 入 门 


续 表 
属 性 名 说 有明 
confirm-type "done" 设置 键盘 右 下 角 按 钮 的 文字 (最 低 版 本 为 1.1.0) 
单 击 键盘 右 下 角 按 钮 时 是 否 保持 键盘 不 收 起 〈 最 低 版 本 为 


confirm-hold false ] .1.0) 


cUISOT Number | 指定 focus 时 的 光标 位 置 (最 低 版 本 为 1.5.0) 


ee 光标 的 起 始 位 置 , 在 自动 聚集 时 有 效 , 需要 与 selection-end 
i 搭配 使 用 (最 低 版 本 为 1.9.0) 


EE 光标 的 结束 位 置 ,在 自动 聚集 时 有 效 , 需要 与 selection-start 
i 搭配 使 用 (最 低 版 本 为 1.9.0) 


adjust-position Boolean le 键盘 弹 起 时 是 否 目 动 上 推 页 面 ( 最 低 版 本 为 1.9.90) 


键盘 输入 时 和 甬 肥 ，event.detail = {value, cursor, keyCode}， 
bindinput EventHandle ee 为 刍 值 ， 从 2.1.0 版 本 起 文 持 ， 处理 函 数 可 以 直接 
返回 一 个 字符 串 ， 将 丛 换 输入 框 的 内 容 


A 聚焦 时 触发 ，event.detail = { value. height }，height 
blindtocus Emal 类 键盘 襄 度 ， 从 基础 库 1.9.90 起 支持 


bindblur |EventHandle| | 输入 框 失 去 焦点 时 触发 ，event detail = {value: value) 
bindconfirm EventHande| 单 击 “完成 ”按钮 时 触发 ，event.detail = {value: value} 


type 属性 的 有 效 值 如 下 。 
。 text: 文本 输入 键盘 。 
。 number: 数字 输入 键盘 。 
。 idcard: 号 份 证 输入 键盘 。 
e。 digit: 市 小 数 点 的 数字 键盘 。 
例如 : 
- <input type="'text" /> 
- <input type='number' /> 


-<input type="'idcard " /> 
- <input tvype='digit" /> 


户 [请 


其 效果 如 图 4-17 所 示 。 

在 图 4-17 中 , 图 (a) 为 type='text' 的 键盘 效果 , 此 时 是 文本 输入 男 面 ; 图 (b) 为 type=number 
的 键盘 效果 ， 此 时 是 纯 数 字 0 一 9， 不 禹 有 小 数 点 的 ; 图 (@) 为 type='idcard' 的 键盘 效果 ， 此 
时 是 文本 输入 画面 ;图 (d) 为 type='digit 的 键盘 效果 ， 此 时 是 纯 数 字 0 一 9， 并 且 带 有 小 数 点 
从 写 。 


TUYV 


空格 


(a) <input type='text 人 > 键盘 效果 (b) <input fype=mumber> 键 盘 效果 


图 4-17 表单 组 件 input 的 type 属性 的 简单 应 用 


户 To 请 


Cn 
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(《c) <imput type='idcard> 键 盘 效 果 


(d) <input type='digit> 键 盘 效 果 


4-17 《〈 续 ) 


confirm-type 属性 的 有 效 值 如 下 。 

e send: 布下 角 显 示 “ 友 到 ”按钮 。 
ee search: 右 和 下角 显示 “搜索 按钮 。 
e next: 右 下 角 显 示 “ 下 一 个 ”按钮 。 
® gO: 右 下 角 显 示 “ 前 住 ” 近 和 钮 。 

。 done: 右 和 下角 显示 “完成 ”按钮 。 
例如 : 


.<input confirm tvype='send" /> 


<input confirm-—type~=~'search" /> 


<input confirm tvpe=—'next'" /> 
in confirm Evoe—"qo /> 
- <input confirm type="done" /> 


其 效果 如 图 4-18 所 示 。 


我 你 是 在 


IE 2 … 


(c) <input confirm-type= mext> 键 盘 效 果 


Te Te 一 Te nn 


名 0 空格 


(Cb) <input confirm-type='search> 键 盘 效 果 


(Cr se Ei = mr 


(d) <input confirm-type='go 人 > 键盘 效果 


4-18 ”表单 组 件 input 的 confirm-type 属性 的 简单 应 用 


中 微 信 小 程序 开发 零 基 础 入 门 “ 克 Fr 


我 你 在 


(e) <input confirm-type='done'> 键 盘 效 果 


图 4-18 《 续 ) 


由 图 4-18 可 见 ，confirm-type 属性 的 不 同 值 会 导致 输入 键盘 右 下 角 的 按钮 发 生 改变 。 需 


要 注意 的 是 ， 该 属性 的 最 终 表 现 与 手机 输入 法 本 身 的 实现 有 天， 部 分 Android 系统 的 输入 法 


和 第 三 方 输入 法 可 能 不 文 持 或 不 完全 文 持 。 


MO 外 旋 


| 一 
a 


【 例 4-12】 表单 组 件 input 的 简单 应 用 
WXMIL (pages/demo03/inputinput.wxml) 的 代码 上 请 段 如 下 : 


. <View class='title'>3 .表单 组 件 Input 的 简单 应 用 </view> 
. <View Class='demo—box'> 视频 讲解 


<View class='title'>(1) 密 人 码 答 入 框 </view> 
<jnput password placeholder=" 请 输入 窗 公 ' /> 


. </view> 


. <VIeEw Class='demo—box'> 


<view class="'title'>(2) 最 大 字符 长 度 限 制 为 10</view> 
<input type='text' maxlength='10' placeholder=-=' 这 里 最 多 只 能 输入 10 个 字 ' /> 


</view> 


-<VIeWw Class='demo—box'> 

11 <view class'title'>(3) 禁用 输入 杠 </view> 

12. <input disabled placeholder=' 议 输入 框 已 被 禁用 ' /> 

13.</viewy> 

14.<view Class="'demo—box'> 

15. <view Class='title'>({4) 目 和 定义 Placeholder 样式 </view> 

16 <1nput placeholder—style='color:red;font—-weight:bold" placeholder=" 自 定 
义 样式 ' /> 

17.</view> 

18.<view Class="demo—box'> 

19. <view class='title>(57 答 入 框 事件 监 听 </view> 

20 <1nput bindinput="getIinput" bindblur='getBlur" placeholder=" 这 里 输入 内 容 将 
被 监听 ' /> 

21 .< /View> 


户 UL lo 捕 


On 


JS _ (pages/demo03/mnputinputjs) 的 代码 上 请 段 如 下 : 


Pagel 
getBlur: functionl(le) 1{ 
console.l1log ("getBlur 触发 ， 文 本 框 失 去 焦点 ， 当 前 值 为 : "+e.detail.value); 
}, 
getInput: functiont(e}) 1 
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6. console.1log(" getInput 触发 ， 输 入 框 内 容 发 生 改 变 ， 当 前 值 为 : "+e.detail.value); 
Le } 
8. 1}) 


运行 效 末 如 图 4-19 所 示 。 


ssess VW/eChat 全 17:33 100% [i)' enee WeChat 全 17:31 


例题 DEMO “00 (©) 例题 DEMO 
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(1) 密码 输入 框 


(1) 密码 输入 框 
请 输入 密码 


(2) 最 大 字符 长 度 限 制 为 10 
这 贰 谷 肆 伍 陆 米 捉 玖 拾 


(2) 最 大 字符 长 度 限 制 为 10 
这 里 最 多 只 能 输入 10 个 字 


(3) 禁用 输入 框 
这 输 入 框 已 被 禁用 


(3) 禁用 输入 框 
该 输入 框 已 被 梦 


(4) 自 定义 placeholder 样 式 
自 定义 样式 


4) 自 定 义 placeholder 样 式 
自 定义 样式 


5) 输入 框 事 件 监听 


abc 


(5) 输入 框 事件 监听 
这 里 输入 内 容 梅 包 监 听 


加 微 信 小 程序 开发 零 基础 入 门 名 徽 信 小 程序 开发 零 基础 入 门 


(a) 页 面 初始 状态 (b) 分 别 输入 内 容 


Console Sources Network Security Audits Storage AppData 
WM Filter Defa 


getInput 触 发 ， 输 入 框 内 容 发 生 改 变 ， 当 前 值 为 : 


getInput 触 发 ， 输 入 框 内 容 发 生 改 变 ， 当 前 值 为 : 
getInput 触 发 ， 输 入 框 内 容 发 生 变 ， 当 前 值 为 : 
getBlur 触 友 ， 区 本 框 失 去 焦点 ， 当 李 伍 为 : abc 


(c》 Console 控制 台 输 出 内 容 
4-19 ”表单 组 件 input 的 简单 应 用 
【 代 但 说 明 】 
本 示例 包含 了 5 组 效果 ， 即 密码 输入 框 、 最 大 字 和 人 长度 限制 为 10、 蔡 用 输入 框 、 目 定义 
placeholder 样式 以 及 输入 框 事 件 监 听 。 在 input.wxml 中 对 第 1 一 4 组 的 <input> 组 件 分 别 使 用 


下” 微 信 小 程序 开发 零 基 础 入 门 


password、maxlength、disabled 和 placeholder-style 属性 实现 效果 。 第 5 组 使 用 了 bindinput 和 
bindblur 属性 分 别 绑 定 输入 事件 和 和 失去 焦点 事件 ， 在 inputjs 中 对 应 的 目 定 义 函 数 是 getBlur0 
和 getInput()。 

4.4.4 label 


<labe]|> 标 签 用 来 改进 表单 组 件 的 可 用 性 ， 使 用 for 属性 找到 对 应 的 id， 或 者 将 控件 放 在 
该 标签 下 ， 蛙 击 时 会 触发 对 应 的 控件 。 访 组 件 对 应 的 属性 如 表 4-27 所 示 。 
表 4-27 <label> 组 件 属性 


属 性 名 说 。 明 
for 绑 定 控件 的 id 


注意 : 目前 可 以 缚 定 的 控件 有 <button>、<checkbox>、<radio>、<switch>。 


这 里 以 多 选 框 <checkbox> 为 例 ， 使 用 <label> 标 签 的 for 属性 的 代码 如 下 : 


- <Checkbox—group> 

<checkbox id="'apple’' value='apple'" checkedqd /> 
<label] for='apple'> 蔷 果 </1label> 

- </checkbox—group> 


Sb 


用 户 也 可 以 将 <checkbox> 组 件 直接 放 在 <label> 廊 : 


1. <checkbox—group> 

ad <label> 

= <Checkbox valueQ="apple" checked /> 苹果 
a </label> 

2 


- </checkbox—group> 


上 述 两 种 做 法 的 效 末 完全 相同 ， 当 用 户 单 击 文 子 内 容 时 就 会 目 动 选中 对 
需要 注意 的 是 , for 的 优 乞 级 局 于丹 部 控件 ， 当 内 部 有 多 个 控件 的 时 候 执 


到 


认 触 发 第 一 个 控件 。 


站 组 人 1 的 简单 及 
【 例 4-13】 表单 组 件 label 的 简单 应 用 视频 讲解 


WXML 的 代码 片 段 如 下 : 


. <view class='title'>3. 表 单 组 件 1abel 的 简单 应 用 </view> 
. <Vilew Class="'demo—box'> 
<view class='title'>(1) 使 用 for 属性 绑 定 id</view> 
<Checkbox—group> 
<checkbox id="'apple" Talue='apple checked /> 
<label for-'apple'> 人 苹果 </label> 
<checkbox id='grape'" walue='grape'" /> 
<label for="'grape'> 各 项 </Jabe]l> 
<cCcheckbox id="'lemon" value='lemon'" /> 
<label tcor=171Lemon> 格 标 </1abe1> 
11- </checkbox—group> 
12.</view> 
13.<w1iew Class~=" demo— box'> 
14. <view class='title'>(2) 控 件 直接 放 在 label 内 部 </view> 


‘DO 外 性 


上 一 
a 
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lo. <checkbox—group> 

16. ~ JabDel> 

LT <Checkbox value="'apple" checked /> 苹果 
Lo </label> 

2 <label> 

IE <checkbox value='grape' /> 葡 欧 
2 </label> 

ee <label> 

2 <checkbox value-'lemon' /> 森 标 
24. </1label>» 

25. </checkbox—-group> 

26.</view> 


Ye | [一 一 一 
运行 效果 如 图 4-20 所 示 。 
生硬 硬 看 硬 UL 有 at 二 17:48 100% [ml 看 大 生硬 面 eC hat 1 7:48 


例题 DEMO “we (©) 例题 DEMO 


第 4 章 小 程序 组 件 
3. 表单 组 件 label 的 简单 应 用 
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3. 表单 组 件 label 的 简单 应 用 


(1) 使 用 for 属 性 绑 定 id 
ww 苹果 疝 杀 柠檬 


(1) 使 用 for 属 性 绑 定 id 
苹果 葡萄 柠檬 


(2) 控件 直接 放 在 label 内 部 
苹果 ~ 葡萄 柠檬 
@@ 微 信人 小 程序 开发 霍 基 础 入 门 


(2) 控件 直接 放 在 label 内 部 
苹果 ”葡萄 ”柠檬 


名 微 信 小 程序 开发 零 基 础 入 门 


(a) 页 面 初始 效果 (b) 单 击 选项 文字 即 可 选中 选项 
图 4-20 “表单 组 件 label 的 简单 应 用 

【 代码 说 明了】 

在 label.wxml 中 设置 了 两 组 效果 ， 即 使 用 for 属性 绑 定 1d、 生 接 将 控件 放 到 label 组 件 的 
内 部 。 这 两 组 效果 均 使 用 了 <checkbox> 完 成 ， 由 图 4-20 可 见 两 种 情况 的 效果 相同 ， 均 为 单 击 
文字 即 可 选中 对 应 的 选项 。 

4.4.S form 


<form> 为 表单 组 件 ， 需 要 与 其 他 表单 组 件 配合 使 用 。 其 中 ，<form> 和 首尾 标 位 之 间 可 以 包 


P22 微 信 小 程序 开发 零 基础 入 门 


含 厂 干 个 供用 户 输 入 或 选择 的 表 蛙 组 件 以 及 提交 按钮 。 
<form> 组 件 允 许 提交 的 内 部 表 蛙 组 件 值 如 下 。 

e <switch>: 开关 选择 紫 。 

。 <input>: 输入 框 组 件 。 

e <checkbox>: 多 项 选择 髓 。 

e <slider>: 消 动 选择 紫 。 

e <radio>: 时 项 选项 髓 。 

e <picker>: 深 动 选择 颖 。 

<form> 组 件 有 3 个 属性 ， 如 表 4-28 所 示 。 


表 4-28 <form> 组 件 属性 


属性 名 称 备注 


report-submit 古人 宪 返回 formId formId 用 于 发 送 模板 消息 


. , | 提交 表单 数据 时 触发 submit | 携 市 值 为 : 
bindsubmit EventHandle . 
事件 event.detall={fvalue:{fname':value' ,formld:"} 


bindreset 表单 被 重 置 时 触发 reset 事件 


注意 : 表单 中 携带 数据 的 组 件 (例如 输入 框 ) 必须 带 有 name 属性 值 ， 
否则 无 法 识别 提交 内 容 。 


【 例 4-14】 表单 组 件 form 的 简单 应 用 中 
WXML (pages/demo03/fornmy/form .wxml) 的 代码 上 请 段 如 下 : 视频 讲解 


. <View class='title'>3. 表 单 组 件 form 的 简单 应 用 </view> 
-。 <VIEW Cass= demo—box'> 
<view class='"'title'> 模 拟 用 户 登录 效果 </view> 
<form bindsubmit="'onSubmit" bindreset="'onReset"'> 
<input name='username" type='text" placeholder=' 请 输入 用 户 名 '></input> 
<input name='password'" password placeholder=' 请 输入 密码 '></input> 
<button size= Iminl form type=" submit" > 提交 </button> 
<button size="mini" form-type=" reset'"' > 重 冒 </button> 
</form> 
.</View> 


‘DD 一 


| 一 
人 


JS (pages/demo03/formy/form.js) 的 代码 斤 段 如 下 : 


1 .PEagett 

Wo onSsSubmit: functiont(e})} 1 

: console.1log(' 表 蛙 被 提交 : '); 
4. coOnsole. logile-detail Valueh :> 
2. } ， 

6 。 onReset: functionl(e) | 

VY. console.1og(' 表 单 已 被 午 置 。'); 
8 . 上 

3. 1}) 


WXSS (pages/demo03/fornyform.wxss 的 代 公 如 下 : 


1. input,butitont 
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margin: lorpx; 

} 

inputt{ 
border: lrpx solid silver; 
height: 60rpx; 

} 


~ 


运行 效果 如 图 4-21 所 示 。 


各 重要 EC 上 at 过 10:01 1060% 


Gd 
例题 DEMO “we) 


10:02 重要 二 生 EChat 全 10:01 


合同 DEMG 例题 口 EM 
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模拟 用 户 登 录 效 果 
请 输入 用 户 名 


模拟 用 户 登录 歼 果 模拟 用 户 登 录 效 果 


请 输入 用 户 名 
请 输入 密码 请 输入 密码 


重音 


提交 章句 


品 微 信 小 程序 开发 零 基础 入 | 巴 微 信 小 程序 开发 零 基 础 入 门 已 微 信 小 程序 开发 零 基础 入 门 


(a) 页 面 初 妈 效 果 (b) 输入 用 记名 和 密码 (c) 单 击 “ 重 置 ”按钮 后 


[x Console Sources Network Securty Audits storage AppData 
( | top rilter Defa 


表单 裤 提 艾 : 


piusername: "admin”, password: 123456 


表单 己 被 重 置 ，。 


(d) 表单 被 提交 和 重 置 后 的 Console 控制 台 输 出 内 容 
4-21 表单 组 件 form 的 简单 应 用 


【代码 说 明 】 

在 form.wxml 中 所 合 了 一 个 <form> 组 件 ， 并 为 其 绑 定 监听 事件 bindsubmit='onSubmit 和 
bindreset'onReset ， 分 别 用 于 监听 表单 的 提交 和 重 置 动作 。 在 <form> 组 件 内 部 放置 了 两 个 
<input> 标 签 , 根据 属性 值 不 同 p00 password ) 分 别 用 于 输入 用 户 名 和 密码 。 在 <inpuf 
标 釜 后面 放置 了 两 个 <button> 标 位 ， 根 据 form-type 人 不 同 〈form-type='submit 和 
='reset') 分 别 用 于 提交 和 和 草 并 表 蛙 。 在 form.wxss 文件 中 设置 <input> 和 <button> 的 外 

边 距 为 10rpx 宽 ， 并 为 <input> 加 上 1lrpx 宽 的 银色 实 线 边框 。 在 form.js 中 设置 自 定义 函数 
onSubmitO0 和 onResetO 触 发 后 的 具体 内 容 ， 即 在 Console 控制 台 打 印 输出 提示 语句 。 

在 图 4-21 中， 图 (a) 是 页 面 初 始 效果 ; 图 (b) 是 填 入 用 户 名 与 密码 后 的 效果 ; 图 (¢) 
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是 单 击 “ 重 置 ” 按钮 后 的 效果 ， 由 该 图 可 见 将 恢复 到 页 面 初始 效果 ; 图 (d) 是 分 别 单 击 “提交 ” 
和 “ 重 置 ”按钮 后 Console 控制 台 的 3 行 输出 内 容 ， 其 中 第 1、2 行 是 单 击 “ 提 交 ” 按 钮 后 的 
提示 语句 ， 由 该 图 可 见 用 户 输入 的 用 户 名 和 密码 将 在 提交 时 被 获取 ， 第 3 行 是 单 击 “ 重 置 ” 
按钮 后 的 提示 语句 。 


4.4.6 picker 


<picker> 是 从 底部 弹 起 的 滚动 选择 器 组 件 , 目前 根据 mode 属性 值 的 不 同 共 文 持 5 种 选择 
器 ， 分 别 是 普通 选择 器 、 多 列 选择 器 、 时 间 选 择 器 、 日 期 选择 堪 、 省 市 区 选择 器 。 大 省略 
mode 信 不 写 ， 其 默认 效果 是 普通 选择 需 。 

普通 选择 器 

当 mode='selector 时 为 普通 选择 哩 效果 ， 相 关 属 性 如 表 4-29 所 示 。 


表 4-29 <picker mode='selector> 组 件 属 性 
属性 名 最 低 版 本 
range Array/Object Array 四 | 当 mode 为 selector 或 multiSelector 时 ，range 有 效 
当 range 是 一 个 Object Array 时 ， 通 过 range-key 来 
指定 Object 中 key 的 值 作为 选择 器 显示 内 容 


range-key |String 


\ value 的 值 表示 选择 了 range 中 的 第 几 个 (下 标 从 0 
value Number z 
开始 ) 
value\ 


disabled 是 否 禁用 


bindcancel |EventHandle |  _ ”| 取消 选择 或 单 击 庶 替 层 收 起 picker 时 触发 1.9.90 


例如 目 定义 一 个 简易 的 普通 选择 基 ， 其 WXML 代码 片段 如 下 : 


1. <picker mode= seLector range=" {lselectorItems}}" bindchange="selectorChange'> 
<view> 当 前 选择 :{{selector}}</view> 
3,. </DiCKer> 


[5 


在 WXML 代码 中 '{ffselector[Items} 是 选项 数组 ，bindchange='selectorChange' 是 选项 改 弯 
时 会 触 上 友 的 函数 ，{fselector}} 是 用 于 显示 选项 内 容 的 变量 ， 该 数组 、 男 数 以 及 变量 名 称 均 为 
目 定 义 。 

对 应 的 JS 代码 户 段 如 下 : 


1. Page lt{ 

二 data: I 

人 selectorItems:[' 芋 果 '，, ' 香 息 ',' 稳 荀 '] 

ee }, 

i selectorChange: function(e) I 

6. iat isevdetail .values // 获 得 选项 的 数组 下 标 

he let value=this.data.selectorItems([il]; / /获得 选项 的 人 

8. this setnatalliselector:-walnell): / /将 选项 名 称 果 新 到 WXML 页 面 上 
2 } 

10. 1}) 


开发 者 可 以 自由 更 改 数组 内 容 和 元 素 个 数 ， 运 行 效果 如 图 4-22 所 示 . 


{2 第 4 章 小 程序 组 件 加 了 


例题 DEMO 


第 4 章 小 程序 组 件 
3. 表单 组 件 picker 的 简单 应 用 


(1) 普通 选择 器 
a 


(2) 多 列 选 择 器 
当前 选择 : 


(3) 时 间 选 择 器 
当前 选择 : 


(4) 日 期 选择 器 
当前 选择 : 


(5) 省 市 区 选择 器 
当前 选择 : 
加 微 信 小 程序 开发 零 基 础 入 门 


香草 


(a) 单 击 普通 选择 器 后 的 效果 (b) 选择 并 确定 后 的 效果 
图 4-22 ”表单 组 件 picker 的 普通 选择 器 的 简单 应 用 


多 列 选择 器 
当 mode 一 'multiSelector' 时 为 多 列 选择 占 效 果 【( 最 低 版 本 为 1.4.0)， 相 关 属 性 如 表 4-30 
所 示 。 


表 4-30 <picker mode='multiSelector'> 组 件 属性 

属 性 名 最 低 版 本 
oe i 当 mode 为 selector 或 multiSelector 时 range 有 
有 效 。 二 维 数组 ， 长 度 表 示 多 少 列 ， 数 组 的 每 项 

ee 表示 每 列 的 数据 ， 例 如 [["a"."b"]. ["e"."d"] 
当 range 是 一 个 二 维 Object Array 时 ， 通 过 
range-key i range-key 来 指定 Object 中 key 的 值 作为 选择 
器 显示 内 容 
Value 每 一 项 的 值 表 示 选 择 J 了 range 对 应 项 中 的 
第 几 个 《下 标 从 0 开始 ) 


value 改 蛮 时 触发 change 事件 ，event.detail = 
EventHandle 
{value: value! 


某 一 列 的 值 改 变 时 触及 columnchange 事件 ， 
event.detall = {column: column. value: value}, 
column 的 人 表示 改变 了 第 几 列 《下 标 从 0 开 
始 ) ，value 的 值 表示 变更 值 的 下 标 
bindcancel EventHandle “| | 取消 选择 时 触发 
disabled Boolean |fase | 是 禁用 


value 


bindchange 


bindcolumnchanege |EventHandle 
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例如 目 定义 一 个 简易 的 多 列 选 择 器 ， 其 WXML 代码 片段 如 下 : 


1 。<PICKeTr mode="multiSelector’” range=" {i{multiSelectoritems}}" bindchange= 
"multiSelectorChange'> 


2 <view> 当 前 选择 : {{multiSselector}}</view> 
3. </picker> 


在 WXML 代 人 码 中 {{multiSelectorItems}} 是 选项 数组 ，bindchange'multiSelectorChange' 
是 选项 改变 时 会 触发 的 函数 ，{{multiSelector}} 是 用 于 显示 选项 内 容 的 变量 ,该 数组 、 函 数 以 
及 变量 名 称 均 为 自 定义 。 


1. Page (1l 
2 data: I 


3 multiselectorItems: [[' 罗 宋 汤 "，' 藤 妆 疡 ']，[' 人 牛排 "，' 猪 排 '，' 鱼 排 ']，[' 冰 湛 
淋 '，' 鸡 重 布丁 "]] 


了 

省 multiSelectorChange: functiont{(e)} I{ 

6 . 1et arravIinde eS detail walue: / /获得 选项 的 数组 下 标 

了 le arrav Chis data mlticseleceorltemns / /获得 选项 数组 

8 let value=new Arrav(}:; // 声 明 一 个 空 数 组 ， 用 于 存放 最 后 选择 的 值 
2 for(llet 1=0;i<arraylndex.length;it++)}) 1{ 

10. let k=~arraylIndex[il; / /第 1 个 数组 的 元 素 下 标 

I let v=arravy[il[lk]; / /获得 第 i 个 数组 的 元 素 值 

Ts Value .push (vv) : // 往 数组 中 退 加 新 元 率 

正二” } 

14. this.setDatatf{l mltisSelector: valunue 1}}): 1 /将 选项 名 称 果 新 到 WXML 页 面 上 
ls 

Ta- 


开发 者 可 以 目 由 更 改 数 组 内 容 和 元 系 个 数 ， 运 行 效果 如 图 4-23 所 示 。 


15:22 


例 品 DEMO 


第 4 章 小 程序 组 件 
3. 表单 组 件 picker 的 简单 应 用 


(1) 普通 选择 器 
当前 选择 : 葡萄 


(2) 多 列 选择 器 ”一 
当前 选择 ; 蘑菇 汤 , 鱼 排 ,鸡蛋 布丁 
(3) 时 间 选 择 器 
当前 选择 : 


(4) 日 期 选择 器 
当前 选择 : 


(5) 省 市 区 选择 器 
当前 选择 : 
名 ' 微 信人 小 程序 开发 零 基础 入 门 


(a) 单 击 多 列 选 择 器 后 的 效果 (b) 选择 并 确定 后 的 效果 
图 4-23 ”表单 组 件 picker 的 多 列 选 择 器 的 简单 应 用 


{YY 第 4 章 小 程序 组 件 器 志 


时 间 选 择 器 
当 mode 一 time' 时 为 时 间 选 择 右 效果 ， 相 关 属 性 如 表 4-31 所 示 。 


表 4-31 <picker mode='time'> 组 件 属性 

属性 名 最 低 版 本 
value sting | 表示 选中 的 时 间 ， 格 式 为 "hhmmy 

start Sting | 表示 有 效 时 间 范 围 的 开始 ， 衬 从 串 格 式 为 "hh:mm" 

加 me 表示 有 效 时 间 范围 的 结束 ， 字 符 惠 格式 为 "hhmmm 

bindchange EventHande | value 改变 时 触发 change 事件 ，eventdetall = {value: value} 
bindcancel EventHandle | | 取消 选择 时 触 友 
be |Boolem ”Flse | 是 


例如 日 定义 一 个 和 何 易 的 时 间 选 择 器 ， 其 WXML 代码 片段 如 下 : 
1. <picker mode='time" binadchange= "七 ImeChange > 


<View> 当 前 选择 : {{time}}</view> 
本 
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在 WXML 代码 中 bindchange 一 timeChange' 是 选项 改变 时 会 触 肥 的 函数 ，{{ftme}} 是 用 于 
显示 选项 内 容 的 变量 ， 该 函数 和 变量 名 称 均 为 自 定义 。 


对 应 的 JS 代码 片段 如 下 

1. Page (tl 

timeChange: function(e) (| 

3 let value=e. detail..valuers / /获得 选择 的 时 间 

4. this.setDatal({ time: Value 1); / /将 选项 名 称 更 新 到 WXML 页 面 上 
I } 

6. }) 


运行 效果 如 图 4-24 所 示 。 


第 4 章 小 程序 组 件 
3. 表单 组 件 picker 的 简单 应 用 


(1) 普通 选择 器 
当前 选择 : 葡萄 
(2) 多 列 选择 器 
当前 选择 : 蘑菇 汤 , 鱼 排 , 鸡 重 布 了 


{3) 时 间 选 择 器 - 
当前 选择 : 03:06 二 一 


(4) 日 期 选择 器 
当前 选择 : 
(5) 省 市 区 选择 器 
当前 选择 : 
已 微 信 小 程序 开发 零 基 础 入门 


(a) 单 击 时间 选 择 器 后 的 效果 (b) 选择 并 确定 后 的 效果 
图 4-24 ”表单 组 件 picker 的 时 间 选 择 器 的 简单 应 用 


微 信 小 程序 开发 零 基础 入 门 二 


日 期 选择 器 
当 mode='date' 时 为 日 期 


选择 规 效 末 ， 相 关 属 性 如 表 4-32 所 示 。 
表 4-32 <picker mode='date'> 组 件 属性 


属性 名 最 低 版 本 
value sting |0 | 表示 选中 的 日 期 ， 格 式 为 "YYYY-MM-DD" 
start sting ”| | 表示 有 效 日 期 范围 的 开始 ， 字 符 串 格式 为 "YYYY-MM- DD" 
| sting ”| | 表示 有 效 日 期 范围 的 结束 ， 字 符 串 格式 为 "YYYY-MM- DD 
fields 有 效 值 为 year、month、day， 表 示 选 择 器 的 粒度 
bindchange EventHande | | 当 value 改变 时 触发 change 事件 ,event.detail = {value: value} 
bindcancel EventHande | | 取消 选择 时 触发 
iisabied 是 理 本 用 
其 中 ，fields 属性 的 有 效 全 如 下 。 
e year: 选择 堪 粒 度 为 年 。 
。 month: 选择 串 粒 上 度 为 月 份 。 
e day: 选择 颖 粒度 为 天 。 
例如 目 定 义 一 个 简易 的 日 期 选择 规 ， 其 WXML 代码 片段 如 下 : 
1. <picker mode="'date" bindchange="'dateChange'»> 


pe <Vview> 当 前 选择 : { {datel}}</view> 
er 


在 WXML 代码 中 bindchange'dateChange' 是 选项 改变 时 会 触 友 的 录 数 ，{{date}} 是 用 于 
显示 选项 内 容 的 变量 ， 该 函数 和 变量 名 称 均 为 目 定义 。 
对 应 的 JS 代码 斤 段 如 下 : 
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1. Page (1{ 

二 dateChange: function(e) 1 

| let value=e.detail .values /7/ 获 得 选择 的 日 期 

4. thiis SEDatall date- yalue 11). / /将 选项 名 称 更 新 到 WXML 页 面 上 
2 } 

6. })} 


运行 效果 如 图 4-25 所 示 。 


第 4 章 小 程序 组 件 
3. 表单 组 件 picker 的 简单 应 用 


人 2) 多 列 选择 器 


(3) 时 间 选 择 器 


当前 选择 : 03:06 


(4) 日 期 选择 器 
当前 选择 : 2018-07-31 


{5) 省 市 区 选择 器 
the 


已 微 信 小 程序 开发 夫 基 础 入 门 


(a) 单 击 日 期 选择 器 后 的 效果 (b) 选择 并 确定 后 的 效果 
图 4-25 ”表单 组 件 picker 的 日 期 选择 器 的 简单 应 用 
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省 市 区 选择 器 
当 mode='regiom' 时 为 省 市 区 选择 右 效 果 (最 低 版 本 为 1.4.0)， 相 天 属性 如 表 4-33 所 示 。 
表 4-33 <picker mode='region'> 组 件 属性 


属性 名 最 低 版 本 


value Armray | | 表示 选中 的 省 市 区 ， 默 认 选 中 每 一 列 的 第 一 个 人 
custom-item sting | 可 为 每 一 列 的 顶部 谨 加 一 个 目 定 义 的 项 1.5.0 


bindchange EventHandle | | 当 value 改变 时 触发 change 事件 ,event.detail = {value: value} 
bindcancel EventHandle | 取消 选择 时 触 友 
ad 是 百村 用 


例如 目 定 义 一 个 简易 的 省 市 区 选择 器 ， 其 WXML 代码 睛 段 如 下 : 


1. <picker mode= egdlIon ”plIndchange= reglonChange'> 
品 芭 <view> 当 前 选择 : { {region}}</view> 
3 </picker> 


在 WXML 代码 中 bindchange'regionChange' 是 选项 改变 时 会 触发 的 冰 数 ，{f{region}} 是 


用 于 显示 选项 内 容 的 变量 ， 该 函数 和 变量 名 称 均 为 自 定义 。 


1. Page l(t{ 

2 reglionChange: functiont(e) | 

let value=e.detail .values /7/ 获 得 选择 的 省 市 区 

4. this.setData({ region: value |}); // 将 选项 名 称 更 新 到 WxML 页 面 上 
eh } 

6. |}) 


注意 : 这 里 的 e.detail.value 是 一 个 包含 3 个 元 率 的 数组 ， 分 别 表 示 省 、 市 、 区 。 


运行 效 末 如 图 4-26 所 示 。 


第 4 章 小 程序 组 件 
3. 表单 组 件 picker 的 简单 应 用 


(2) 多 列 选择 器 
当前 选择 : 蘑 奖 汤 , 鱼 排 , 鸡 量 布丁 


(3) 时 间 选 择 器 
当前 选择 : 03:06 


(4) 日 期 选择 器 
当前 选择 : 2018-07-31 


(5) 省 市 区 选择 器 。 一 
当前 选择 : 北京 市 ,北京 市 东城 区 
怕 微 信 小 程序 开发 零 基础 入 门 


(a) 单 击 省 市 区 选择 器 后 的 效果 Cb》 选 择 并 确定 后 的 效 琳 
图 4-26 ”表单 组 件 picker 的 省 市 区 选择 器 的 简单 应 用 


上 开 济 。” 微 信 小 程序 开发 零 基础 入 门 
【 例 4-15】 表单 组 件 picker 的 简单 应 用 
WXML (pages/demo03/pickerpickerwxml) 的 代码 片段 如 下 : 


1. <view class='title'>3. 表 单 组 件 picker 的 简单 应 用 </view> 
2. <VIiew Class='demo—box'> 


:pe <View Class='title'>(1) 普 骨 选择 器 </view> 视频 讲解 

4 <picker mode~='selector" range='{{selectorltems}}" bindchange= 
'selectorChange'> 

Se <view> 当 前 选择 : {{selector}}</view> 

忆 . </picker> 


71. </view> 

8. <view Cass= aqQemo 一 DoX > 

9. <view Class='title'>1(2) 多 网 选 择 器 </view> 

10- <picker mode="multiSelector" range="{{multiSelectorlItems}}' bindchange= 
‘multiSelectorChange'> 

I <view> 当 前 选择 : {{multiSelector}}</view> 

ee 

13.</view> 

14.<view class='demo—box'> 

15. <view class='title'>(3) 时 间 选 择 器 </view> 

le6. <picker mode="'time" bindchange='tijimeChange'»> 

UE <view> 当 前 选择 : { {time}}</view> 

18. </picker> 

19.</view> 

20.<view Class="'demo—box'> 

21. <view class="'title'>(4) 日 期 选择 器 </view> 

22- <pDicker mode= aate ”Dindchange= aatecChange > 

2 <view> 当 前 选择 : {{date}}</view> 

24. </picker> 

25.</view> 

26.<view Class="'demo—box'> 

27. <view class='title'>(5) 省 市 区 选择 占 </view> 

28. <picker mode="reglion’' bindchange=" reglonChange'> 

29. <yview> 当 前 选择 : {{region} }</view> 

30. </picker> 

31 .</view> 


JS (pages/demo03 人 pickerpickerjs) 的 代码 片段 如 下 : 


1 。 Page ll 
2 data: I 
号 。 selectorItems: [ 苹果" ，，' 理 人 乱 ! ，5 葡 人 草 ? ] ， 


4-. multiSelectorItems: [[' 多 宋 疡 '"，' 玄 闸 汤 ']，[' 牛 排 '，' 猪 排 '，' 鱼 排 ']，[' 冰 
湛 淋 '，' 鸡 重 布 J ']] 


= ja 
6. SelectorChange: function(e) | 

ye I // 绪 得 选项 的 数组 下 标 

8. let value=this.data.selectorItems[i]; / /获得 选项 的 值 

9. this.setData({selector:valuel})}).; / /将 选项 名 称 更 新 到 WXML 页 面 上 
10. 上 

li. multiSelectorChange: functionl(e) | 

有 le Aarravindex=e.detail.values // 绪 得 选项 的 数组 下 标 

I let array—this.data.multiSelectorItems; // 绪 得 选项 数组 


i let Value = new Arravt{): /7 声明 一 个 空 数组 ， 用 于 存放 最 后 选择 的 值 
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1 for(let i=0;i<arraylIndex. length;1it++)} 1{ 

16. let k=arrayIndex[i]; // 第 工 个 数组 的 元 素 下 标 
I le warirawmiillkls // 获 得 第 i 个 数组 的 元 系 值 
18. Value .push (v) ; // 往 数组 中 仍 加 新 元 系 

J } 


20. this.setData({ multiselector: value }); // 将 选项 名 称 更 新 到 WXxML 页 面 上 
a 7 


22. timeChange: functionl(e) { 


pe let value=e.detail.value; // 绪 得 选择 的 时 间 
24. this. setDatall Tie value 1): / /将 选项 名 称 更 新 到 WXML 页 面 上 
25- 上 
26. dateChange: functionl(e}) 1 
2 let value=e.detail.value; / /获得 选择 的 日 期 
28. this.setDatal({ date: value 1}); / /将 选项 名 称 更 新 到 WXML 页 面 上 
23- 上 
30. reglonChange: tunctlIon (el) { 
2 let value=e.detail.value; // 获 得 选择 的 省 市 区 
3 this.setDatal({ region: Value }); / /将 选项 名 称 果 新 到 W&ML 页 面 上 
33. 1 
3 
【代码 说 明了】 


本 示例 是 将 5 种 选择 器 的 代码 汇总 而 成 ， 因 此 不 再 袭 述 实现 过 程 ， 运 行 效果 也 请 读者 参 
照 前 面 的 图 4-22 一 图 4-26。 


4.4.7 picker-view 
<picker-view> 是 葡 入 页 面 的 深 动 选择 右 ， 相 天 属性 如 表 4-34 所 示 。 


表 4-34 <picker-view> 组 件 属性 


属 性 名 最 低 版 本 


数组 中 的 数字 依次 表示 picker-view 内 的 


value NumberArray | picker-view-column 选择 的 第 儿 项 (下 标 从 0 开始 ) ， 数 
字 大 于 picker-view-column 可 选项 长 度 时 选择 最 后 一 项 
indicator-style 设置 选择 器 中 间 选 中 框 的 样式 
indicator-class 设置 选择 器 中 间 选 中 框 的 类 名 1.1.0 
mask-style 设置 遮 蛙 层 的 样式 1.5.0 
mask-class 设置 庶 单 层 的 类 名 1.5.0 
当 滚 动 选择 ,value 改变 时 触发 change 事件 , event.detail = 
bindchange EventHandle | {value: value}; value 为 数组 ， 表 示 picker-view 内 的 
picker-View-column 当前 选择 的 古 第 几 项 (下 标 从 0 开始 ) 
在 <picker-view> 中 需要 放置 1 一 N 个 <picker-view-column> 来 表示 对 应 的 列 选 项 。 需 要 注 
是 的 是 ，<picker-view-column> 仅 可 放置 于 <picker-view> 中 ， 其 子 世 点 的 凯 


度 会 自动 设置 成 与 <picker-view> 选 中 框 的 高 度 一 致 。 
【 例 4-16】 表单 组 件 picker-view 的 简单 应 用 . ai 
WXML (pages/demo03/picker-view/picker-view.wxml) 的 代码 片段 如 下 : 。 国 革 守 扒 寺 


二 区 昌 
Sey We 
蜂 虽 | 


1. <view class='title>3. 表 单 组 件 Plicker—view 的 简单 应 用 < /view> 视频 讲解 
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2. <View Cass= Qemo 一 boOX "> 

3 <view Class='title'>» 今 日 沫 单 </view> 

4. <Vview Class='title'>{ {menu} }</view> 

2 <pDicker—viewvalue="'{{value}}" indicator—style='height: 50px; "bindchange= 
‘pickerviewChange'> 


6 <plicker—view—column> 
| <View Class='col" wx:for='{{soup}}" wx:key='s{{index}}'>{{item}} </Vview> 
8. </picker—view—column> 
号 <DICkKer—view—Columm> 
10. <Vliew Class="col" wx:for="{{maincoursel}l}" wzx:key="'m{l{index}}'> 
{{item} }</view> 
| </picker—view—column> 
| <plicker—vliew—Ccolumn> 
了 = <View Class="'col" wx:for="{{dessertl}}" wx:kevy="d{{index}}'> 
{ {item} }</view> 
1 </picker—view—column> 
| 民 </picker—view> 
16. </view> 


WXSS (pages/demo03/picker-view/picker-view.wxss) 的 代码 片段 如 下 : 


1. picker— view 1 
width: 100$; 

3 heiqght: 300pxs 
he 

a 

Gs line height: oD0pxs 
a 


JS (pages/demo03APicker-view/picker-view.js) 的 代 但 片段 如 下 : 


| 

Wa data: { 

soup: [' 奶 油 玄关 汤 '，' 罗 宋 汤 '，' 和 牛肉 消 疡 ']， 

4. maincourse: [' 册 小 牛肉 知 "，' 传 统 烤 三 排 '，' 清 杀 二 文 外 ']， 
SG: dessert: [坚果 冰 进 淋 !， ' 焦 糖 布 了  ， 奶酪 乍 糙 ' ] ， 

6. valne® T1111. / /默认 每 个 选项 的 数组 下 标 

7. menu: [| 

Be 上 ， 

~ pickerviewChange: functionl(e) { 

10. let v=e.detail.value; / /获取 每 个 选项 的 数组 下 标 
| Jet menmnu 三 | | >， 

| pe menu.push (this.data.soup[v[l0]]); 

| menu.push (this.data.maincoursel[lv[llil|l)}):; 

14. menu.push(this.data.dessert[lv[211}s; 

as this.setData({menu:menul}),; 

16. } 

17.}) 


运行 效果 如 图 4-27 所 示 。 

【代码 说 明了】 

本 示例 在 picker-view.wxml 中 设置 了 一 个 <picker-view> 组 件 用 于 模拟 点 餐 , 其 内 部 包含 3 
列 <picker-view-column> ， 分 别 用 于 显示 西餐 来 单 中 的 汤 、 主 食 和 甜点 。 在 每 个 
<picker-view-column> 内 部 均 使 用 <view> 组 件 配 合 wx:for 语句 循环 显示 对 应 的 数组 选项 , 分 别 
是 {{soup}}、{{maincourse}} 和 {{dessert}}。 为 外 ， 为 <picker-view> 组 件 绑 定 了 目 定 义 事件 监 
听 ， 即 bindchange'pickerviewChange'"， 当 用 尸 更 改 了 沫 早 选 项 时 会 被 般 发 。 

在 picker-view.js 中 规定 ， 硅 pickerviewChange0 〇 函数 被 触 友 则 获取 最 新 选项 列 的 数组 下 
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标 ， 并 将 结果 更 新 到 {tmenu}} 变 量 中 ， 了 最 后 显示 到 <picker-view> 组 件 的 上 方 。 
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今日 菜单 今日 菜单 
奶油 蘑菇 汤 , 传 统 烤 羊 排 ,奶酪 蛋糕 


坚果 冰淇淋 
前 小 牛肉 卷 。 坚果 水 湛 淋 
就 小 牛肉 卷 。” 焦 糖 布丁 
传统 烤 羊 排 。” 集 糖 布丁 
奶 山 其 茹 汤 。 传统 烤 羊 排 ”奶酪 蛋糕 
清 者 三 文 鱼 ”奶酪 蛋糕 
多 木 疝 清 豆 三 文 鱼 


上 | 1 i] 


号 微 信 小 程序 开发 零 基础 入 | 
已 微 信 小 程序 开发 零 基 础 入 门 


(a)》 页面 初始 效果 (b》 菜 单 更 改 后 的 效果 
4-27 ”表单 组 件 picker-view 的 简单 应 用 


在 图 4-27 中 ， 图 (a) 为 页 面 初 始 效 果 ， 此 时 默认 选中 每 列 的 第 2 个 选项 ， 图 (b) 为 采 
早 更 改 后 的 效果 ， 由 该 图 可 见 此 时 最 新 选项 的 内 容 已 经 最 示 到 亲 单 项 病 。 


4.4.8 radio 


<Tradio> 为 单 选 框 组 件 ， 往 往 需 要 与 <radio-group> 组 件 配合 使 用 ， 其 中 <radio-group> 首 尾 
标签 之 团 可 以 包 舍 在 干 个 <radio> 组 件 。 
<radio-group> 组 件 只 有 一 个 属性 ， 如 表 4-35 所 示 。 
表 4-35 <radio-group> 组 件 属 性 
属性 名称 备 。 注 
当 内 部 <radio> 组 件 选 中 与 携 市 值 为 event.detail={value: 被 选中 


bindchange EventHandle - 改变 时 触发 change radio 组 件 的 value 值 } 


<radio> 组 件 的 属性 如 表 4-36 所 示 。 


表 4-36 <radio> 组 件 属性 


value 组 件 所 携 市 的 标识 值 | 当 <radio-group> 的 change 事件 被 触及 时 会 携 币 该 值 


checked 是 否 选中 该 组 件 其 默认 值 为 false 
disabled 是 否 禁 用 该 组 件 其 默认 仁 为 false 


color 组 件 的 闫 色 与 css 中 的 color 效果 相同 


一 微 信 小 程序 开发 零 基础 入 门 


例如 : 


. <Iadlio—group> 

<radio value='watermelon' checked /> 西瓜 
<radio value="orange" disabled /> 橙子 
<radio value="strawberry’ /> 草 和 蔡 

<radio value="'"pineapple'， /> 莪 豆 

- </radio—group> 


GO 上 uhoo 请 


其 效果 如 图 4-28 所 示 。 


人 @ 西瓜 ”楼 子 草 葵 ” 菠 葛 


4-28 ”表单 组 件 radio 的 简单 应 用 


由 图 4-28 可 见 ,“ 西 瓜 ” 选 项 是 坝 认 依 选 中 状态 ,“ 栓 了 于 ”选项 是 茶 止 ”国宝 富生 
选择 状态 ， 其 他 选项 为 未 选中 状态 。 注 意 ，<radio-group> 组 件 内 部 不 允许 多 【生长 宝 呈 
选 ， 一 旦 选择 了 其 他 选项 ， 原 先 被 选中 的 选项 将 变 回 未 选中 状态 。 

【 例 4-17】 表单 组 件 radio 的 简单 应 用 

WXML (pages/demo03/radio/radio.wxml) 的 代码 片段 如 下 : 视频 讲解 


。<View class='title'>3. 表 单 组 件 radio 的 简单 应 用 </view> 
- <View Class="demo—box'"> 
<view class="'title'>3 使 用 数组 批量 生成 选项 </view> 
<Iadio-group bindchange="radioChange'> 
<Vvliew Class='test" wzXx:for="'{{radioltems}}" wx:kevy="'item{l{index}}'> 
<radio value='{{item.value}}' checked='{{item.checked}}" />{{item.namel}} 
</view> 


</radio—group> 
. </Vview> 


Dm] 


JS (pages/demo03adioradio.js) 的 代码 片段 如 下 : 


1 。 Page ll 

六 data: I 

本 radioItems: | 

4. { name: "苹果 ',， value: "apple" }， 

et Luame IIe Tn necked "ETUe | 
6. 1 niame: "Rf', value: “pear }., 

村 { name: " 草 每 ETEawerey |， 
日 { name: ' 得 和 芒 ',， value: '"'banana' }， 

让 { name: ' 和 葡 厨 '， value: ' grape” 1}, 

10. ] 

1l1. 1}, 


1l2. IadioChange: functionile) 1 
13. Console.1l1og('radio 发 生变 化 ， 被 选中 的 值 是 : ' + e.detail. value) 


运行 效果 如 图 4-29 所 示 。 
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ee 使 用 数组 批量 生成 选项 
© 人 了 
列子 
理 攻 @ 理 基 


葡萄 葡萄 
已 微 信 小 程序 开发 零 基础 入 门 已 微 信 小 程序 开发 雪 基 础 入 门 


(a) 页 面 初 始 状 态 (b) 新 选项 被 选中 状态 


Console Sources Network Application Security Audits Storage AppData 


™ | Filter Default levels ™ 


radio 发 生变 化 ， 被 选中 的 值 是 : banana 


CC》 新 选项 被 选中 时 Console 输出 的 内 容 
图 4-29 ”表单 组 件 radio 的 简单 应 用 

【代码 说 明 】 

在 radio.js 的 data 中 设置 了 一 个 数组 radioItems， 用 于 记录 多 选 选 项 的 名 称 (name )、 值 
(value) 以 及 初始 的 选中 状态 (checked)。 在 radio.wxml 中 使 用 <radio-group> 标 俭 形 成 单 选 组 ， 
并 在 其 内 部 使 用 <view> 标 俭 配合 wx:for 循环 实现 批量 生成 多 个 radio 组 件 的 效果 。 

为 达到 监听 选项 改变 的 目的 ， 在 <radio-group> 标 签 上 添加 属性 bindchange， 其 属性 值 
radioChange 为 目 定义 函数 名 称 。 然 后 在 radio.js 中 追加 该 函数 的 具体 内 容 ， 即 每 次 被 触发 都 
在 Console 控制 侣 打印 输出 最 新 选中 的 所 有 值 。 

在 图 4-29 中 ， 由 图 (a) 可 见 页 面 初 始 显示 效果 成 功 识 询 了 选项 的 名 称 和 选中 状态 〈 掏 
认 橙 子 选 项 为 选中 效果 );， 由 图 (b) 可 见 一 旦 选 了 新 的 选项 ， 原 和 驳 的 选项 将 目 动 取消 选中 状态 ; 
图 (c) 为 Console 控制 台 的 输出 内 容 ， 由 该 图 可 见 当 选项 被 改变 时 会 目 动 输出 被 选中 的 值 。 


4.4.9 slider 
<slider> 为 滑动 选择 器 ， 访 组件 对 应 的 属性 如 表 4-37 所 示 。 
表 4-37 <slider> 组 件 属性 


属 性 名 最 低 版 本 
min Number |0 | 最 小 值 ,允许 是 负数 


men 


| 步 长 ， 取 全 必 须 大 于 0， 并 且 可 被 (max -- 
step Number min) 整 除 


一 微 信 小 程序 开发 零 基 础 入 门 


续 表 


属 任 名 大 低 奢 


disabled Boolean false 
value _Number |0 | 当前 取 值 


color #e9e9e9 背景 条 的 启 色 (请 使 用 backgroundColor) 
selected-color #1laadl19 己 选 择 的 颜色 〈 请 使 用 activeColor) 


activeColor #1laadl9 | 


选择 的 项 色 


backgroundColor #e9e9e9 背景 条 的 启 色 


block-size 150 
block-color 滑 基 的 硕 色 150 


Show-vale 


ee i 完成 一 次 拖 动 后 触发 的 事件 ，eventdetail 
= {value: value} 
bindchaneine EventHandle 皂 动 过 程 中 触发 的 事件 ，event.detail = 1.7.0 
bb : {value: value} 


例如 制作 一 个 目 定 义 滑 动 杀 ， 最 小 值 为 50、 最 大 值 为 200， 并 且 在 右 侧 受 示 当前 数值 : 


<Sslider min="50" max="200™ show—value/> 


其 效 示 如 图 4-30 所 示 。 


图 4-30 ”表单 组 件 slider 的 简单 应 用 


滑动 条 主要 是 由 滑动 线条 与 滑 块 组 成 的 ， 滑 块 左 侧 的 彩色 线条 为 选中 的 
数 伍 泄 围 。 请 块 越 往 右 移动 ， 所 显示 的 数值 驶 越 大 。 

【 例 4-18】 表单 组 件 slider 的 简单 应 用 

WXML (pages/demo03/slider'slliderwxml) 的 代码 片段 如 下 : 


1. <view class='titler>3. 表 单 组 件 slider 的 简单 应 用 < /view> 饮 频 讲 解 

2. <View Cass= aqQemo 一 boX "> 

本 <View class='title'>(1) 请 动 条 右 侧 显 示 当 前 取 值 </view> 

4. <slider min="'0" max='100" value='50" step='5" show—value /> 

5. </view> 

6. <Vview Class='demo—box'> 

i <View class='title'>(2) 目 定义 背 动 条 闫 色 和 滑 块 样式 </view> 

I <Slider min="0" max= 100" walue='o0" block—size="20" block—color='red" 
actiwveColor="'red" /> 

9. </view> 

lO0.<view Class="'demo—box'> 

11 <view class='title'>(3) 茶 用 请 动 条 (无 法 改变 当 六 数值 ) </view> 

12 <slider min="0" max="'100°" walue="'50" disableqd /> 

13.</view> 

14.<view Class="'demo—box'> 

15. <view class='title'>(4) 背 动 条 事件 监听 </view> 

16. <slider min='0" max='1007 value='50" bindchange="'sliderChange' /> 

17.</viewy> 


JS (pages/demo03/slider/sliderjs) 的 代码 请 段 如 下 : 


- PagetL 


sliderCchange: functionl(e) I 


COnSOTLe -1og1 siider 发 生变 化 ， 当 前 值 是 : 


| 


运行 效 采 如 图 4-31 所 示 。 


和 Chat 过 15:19 


例 吴 DEMO 
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(1) 滑动 条 右 侧 显 示 当 前 取 值 


(2) 目 定 光滑 动 条 黄色 和 滑 块 样式 
一 一 


(3) 禁用 滑动 条 ( 无 法 改变 当前 数值 ) 


(4 滑动 条 事件 监听 


心 微 信 小 程序 帮 大 零 基础 和 1] 


(a) 页 面 初 始 状态 


SOUrces Network 


OQ | top v 


[KR Console Application 


Filter 


第 4 章 


小 程序 组 件 


+ e.detail.value) 
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(1) 滑动 条 右 侧 显示 当前 取 值 


(2) 自 定 匀 滑动 条 颜色 和 滑 块 样式 
一 一 全 


(3) 禁用 滑动 条 ( 无 法 改变 当前 数值 ) 


(4) 滑动 条 事件 监 中 


司 微 信 小 程序 开发 要 基础 入 门 


(b) 第 4 个 滑 块 移动 触发 监 昕 事件 


Security Audits Storage AppData 


Default levels ™ 


slider 发 生变 化 ， 当 前 值 是 ，79 


(c) 第 4 个 清 块 移动 后 Console 输出 的 内 容 
4-31 表单 组 件 slider 的 简单 应 用 
【代码 说 明 】 
本 示例 依次 列举 了 4 种 滑动 条 的 情况 ， 即 滑动 条 右 侧 显示 当前 取 值 、 目 定义 滑动 条 闫 色 
和 滑 块 样式 、 禁 用 滑动 条 (无 法 改变 当前 数值 )、 滑 动 条 事件 监听 。 
在 图 4-31 中 ， 图 (a) 是 页 面 初 始 状态 ， 由 该 图 可 见 请 动 条 1 显示 当前 取 值 ， 请 动 条 2 
及 其 滑 块 的 项 色 更 改 为 红色 ， 并 且 滑 块 的 尺寸 缩小 为 20， 滑 动 条 3 由 于 被 蔡 用 ， 滑 块 无 法 被 
拖 动 : 图 (b) 是 更 改 滑 动 条 4 的 滑 块 位 置 后 的 效果 图 ， 此 时 会 触发 <slider> 标 签 上 的 
bindchange='sllderChange' 事 件 ; 图 (c) 是 sliderChange 事件 的 运行 结果 , 由 该 图 可 见 在 Console 
控制 台 上 会 输出 slider 的 最 新 值 。 
4.4.10 


<switch> 为 开关 选择 赤 ， 该 组 件 对 应 的 属性 如 表 4-38 所 示 。 


SWltch 


表 4-38 ”<switch> 组 件 属性 


属性 名 | 类 型 | 默认 值 说 明 


checked lse | 是 天 第 
pe 笠 式 ， 有 并 从 为 Switch、 checkbox 


bindchange EventHandle | | checked 改变 时 触发 change 事件 ，eventdetail=fvalue:checked} 
color Color | switch 时] 闫 人 色 ， 同 ] css 的 color 


微 信 小 程序 开发 零 基础 入 门 


于 
ea 


当 控 钮 在 左边 时 为 没 选中 状态 ， 此 时 选择 句 为 黑 日 效 采 。 


户 [oo 请 


On 


例如 : 


<switch checked /> 选中 
<switch /> 疫 选 中 


其 效果 如 图 4-32 所 示 。 


图 4-32 ”表单 组 件 switch 的 简单 应 用 
由 图 4-32 可 见 ， 当 按钮 在 右边 时 为 选中 状态 ， 此 时 选择 器 为 彩色 效果 ; 


【 例 4-19】 表单 组 件 switch 的 简单 应 用 
WXML (pages/demo03/switch/switch.wxml) 的 代码 片段 如 下 : 


.<view class='title'>3-. 表 单 组 件 switch 的 简单 应 用 < /view> 视频 讲解 


。 < leW Class='demo—box'> 


<WVIeW Class="'title'>switch 事件 监听 < /view> 
<switch checked bindchange="switchChange™ /> 


. </view> 


JS (pages/demo03/switch/switch.js) 的 代码 片段 如 下 : 


Page ({ 
switchChange: function(e) I 
console.logl('" switch 发 生变 化 ， 当前 值 是 : ”+ e.detail .value) 
} 


- }) 


运行 效果 如 图 4-33 所 示 。 


16:25 生生 生生 本 A EL Nat 3 16:25 100% [mm 


例题 让 EM 总 ws | 例 吏 DEMO | 
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switch 事 件 监 听 switch 事 件 监听 


@, 


书 微 信 小 程序 开发 夫 基 础 入 | ] 已 微 信 小 程序 开 点 专 基 础 人 | ] 


(a) 页 面 初始 状态 (b) 切换 switch 按钮 触发 监听 事件 
图 4-33 ”表单 组 件 switch 的 简单 应 用 
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Sources Network Audits 


Application 


Console Security Storage AppData 


本 Filter Default levels ™ 


switch 发 生变 化 ， 当 前 但 是 : false 


(ce) 切换 switch 按钮 后 Console 输出 的 内 容 
4-33 ( 续 ) 
【代码 说 明 】 
在 switch.wxml 中 使 用 <switch> 标 签 配合 checked 属性 实现 默认 选中 的 状态 ,并 绑 定 自 定 
义 单 击 事件 switchChange。 在 switchjs 中 描述 switchChange0 函 数 ， 一 旦 被 触发 就 在 Console 控 
制 台 输 出 当前 switch 的 选择 结果 。 由 图 4-33 可 见 ， 关闭 switch 开关 后 Console 控制 台 输 出 false。 


4.4.11 textarea 


<textarea> 为 多 行 输入 框 ， 该 组 件 对 应 的 属性 如 表 4-39 所 示 。 
39 ”<textarea> 组 件 属性 

属 性 名 说 有 明 

value i i 输入 框 的 内 容 

placeholder ”| Suing ”| ”| 输入 要 为 衬 时 的 下 位 和 

es EE String ee 指定 placeholder 的 样式 

placeholder- _ textarea- ge pe 

aa 否 村 用 
ae 生硬 大 必 六 一生 于 方 工 贡 可 本 不 陈 币 庆 大 必 
auto-focus 自动 聚集 ， 拉 起 键入 
focus 让 二 下 获取 焦点 
auto-height Boolean | false | 是 否 上 自动 增高 ， 人 设置 auto-height 时 style.height 不 生效 

如 果 textarea 大 在 一 个 position:fixed 的 区 域 ， 需要 灾 式 指 


cursor-spacing 


青 定 元 村 与 和 租 的 现 丙 单位 为 px， 取 textarea 距离 底 
的 距离 和 cursor-spacing 指定 的 距离 的 最 小 值 作为 光标 
与 键盘 的 距离 


al 


cursor pA 指定 focus 时 人 人 1.5.0) 
ee 1.6.0) 


selection-start 


selection-end 


光标 起 始 位 置 ， 目 动 聚 集 时 有 效 ， 需 要 与 selection-end 搭 
配 使 用 (最 低 版 本 为 1.9.0) 

光标 结束 位 置 ， 目 动 聚 集 时 有 效 ， 需 要 与 selection-start 
搭配 使 用 〈 取 低 友 本 为 1.9.0) 


adjust-position | Boolean | te | 键盘 弹 起 时 是 否 自动 上 推 页 面 (最 低 版 本 为 1.9.90) 
a Event 输入 杠 取 焦 时 触发 ，event.detail = { value. height }，height 
Handle 为 键盘 高 度 ( 最 低 版 本 为 1.9.90) 
bindblur 0 输入 框 失 去 焦点 时 触发 ，event.detail = {value, cursor} 
bindline Event 输入 框 行 数 变 化 时 调用 ，eventdetail = {height: 0., 
change Handle heightRpx: 0. lneCount: 0} 
人 当 和 键盘 输入 时 触 友 input 事件 ，event.detail = {value. 
bindinput ee cursor} ， bindinput 处 理沙 数 的 返回 值 并 不 会 反映 到 
textarea 上 
bindconfirm 上 -= 单 击 完成 时 触发 confirm 事件 ,event.detail = {value: value} 
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【 例 4-20】 表单 组 件 textarea 的 简单 应 用 
WXML (pages/demo03/textareaytextarea.wxml) 的 代码 片段 如 下 : 


1. <view class='title>3. 表 单 组 件 textarea 的 简单 应 用 </view> 

2. <View Class='demo—box'> 

ee <view class='title'>(1) 日 动 变 高 </view> 视频 讲解 

4. <textarea auto-height Placeholder=" 默 认 只 有 一 行 ， 但 可 以 目 动 变 疝 " /> 

5 。</View> 

6. <view CasSs= demo 一 PoX > 

可 <View class='"'title'>(2) 目 定义 占 位 从 闫 色 </view> 

8 - <textarea placeholder="placeholder 颜色 是 红色 的 " placeholder—style= 
"eolor:redr™ /> 

9. </view> 

10.<view Class="demo—box'> 

11. <view class='title'>(3) 被 禁用 状态 </view> 

120 [extarea pldcehnoelder="| 芒 VW 水 慌 已 收 守 用 "isaBbled > 

13.</view> 


WXSS (pages/demo03/textarea/textarea.wxss) 的 代码 片段 如 下 : 


] 。 textareatf 

a width: 100%; 

二 border: lrpx solid grav; 
4 中 


运行 效果 如 图 4-34 所 示 。 


看 重重 硬 鲁 WA/EChat 二 17:17 重重 生硬 二 WE 人 hat 二 17:19 
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3. 表单 组 件 textarea 的 简单 应 用 


第 4 章 小 程序 组 件 
3. 表单 组 件 textarea 的 简单 应 用 
(1) 自动 变 高 


默认 只 有 一 行 ， 但 可 以 自动 变 高 


(1) 目 动 变 高 


(2) 目 定 义 占 位 符 颜色 
placeholder 颜 色 是 红色 的 


(2) 自 定义 占 位 得 颜色 


placeholder 颜 色 是 红色 的 


(3) 被 禁用 状态 


多 ) 微 信 小 程序 开发 零 基 础 入 | 
(a) 页 面 初 始 状态 Cb) 第 1 组 文本 框 自动 变 高 


图 4-34 表单 组 件 textarea 的 简单 应 用 
【代码 说 明 】 
本 示例 在 textarea.wxml 中 设置 了 3 组 <textarea>， 分 别 用 于 测试 ， 即 自动 变 高 、 自 定义 
占 位 符 闫 色 、 被 禁用 状态 ， 并 在 textarea.wxss 中 设置 多 行文 本 框 样 式 为 宽 100%、 市 有 lrpx 
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在 图 4-34 中 ， 图 (a) 为 页 面 初始 状态 ， 此 时 第 1 组 中 的 文本 框 默认 只 有 1 行 高 ， 第 2 
组 中 的 占 位 符 是 上 自 定义 的 红色 效果 ,第 3 组 中 的 文本 框 已 被 禁用 ， 无 法 输入 内 容 ; 图 (b) 为 
在 第 1 组 的 文本 框 中 输入 多 行内 容 ， 由 该 图 可 见 此 时 文本 框 已 经 自动 变 高 。 


导航 组 件 <navigator> 用 于 单 击 跳 转 页 面 链接 ， 其 对 应 的 属性 如 表 4-40 所 示 。 


表 4-40” navigator 组 件 属性 


属性 名 说 明 


target | Sting | | 在 哪个 目标 上 发 生 跳 转 ， 默 认 当 前 小 程序 
ul Stmng | | 当前 小 程序 内 的 跳 转 链接 地 址 
open-type 跳 转 方式 ， 共 有 5 种 方式 


其 中 open-type 属性 对 应 的 5 种 取 值 如 表 4-41 所 示 。 


表 4-41 open-type 属性 


属 性 值 说 明 
Wo 默认 值 ， 表 示 跳 转 新 页 面 打 开 新 地 址 内 容 (等 同 于 Wx.navigateTo0 或 wx.navigate 
Ee TpMiniProgram( 〇 的 功能 
redirect 重 定 同 ， 表 示 在 当前 页 面 重 新 打开 新 地 址 内 容 〈 等 同 于 wx.redirectTo0 的 功能 


switchTab 切换 tab 面板 ， 表 示 哈 转 指 定 tab 页 面 重 新 打开 新 地 址 内 容 〈 等 同 于 wxswitchTabO 的 功能 ) 
reLaunch 切换 tab 面板 ， 表 示 跳 技 指 定 tab 页 面 重 新 打开 新 地 址 内 容 〈 等 同 于 wx.switchTab0 的 功能 ) 
navigateBack | 返回 上 一 页 〈 等 同 于 wx.navigateBack0O 的 功能 ) 


注意 : 上 述 等 同 功能 的 用 法 详 见 第 11 章 “ 界 面 APIT”。 
例如 


1 。 <navigator url="../new/new"> 
<button tvYvpe="primarvy"> 跳 转 到 新 页 面 打 开 新 内 容 </button> 
3. </navigator> 


[5 


上 述 代 人 码 表 示 在 导航 组 件 <navigator> 中 内 髓 按钮 组 件 <button> 来 实现 跳 转 功能 。 当 前 
<navigator> 组 件 并 未 声明 open-type 属性 ， 因 此 表示 默认 情况 ， 即 跳 转 新 页 面 打开 new.wxml。 
如 果 需 要 传递 数据 给 新 页 面 ，<navigator> 组 件 的 url 属性 值 可 以 使 用 如 下 格式 
<navigator ur1I=" 跳 转 的 新 页 面 地 址 ?参数 1= 值 1& 和 参数 2= 值 2g… 参 数 FF 值 N"> 
其 中 参数 名 称 可 以 由 开发 者 自 定 义 ， 参 数 个 数 为 一 个 至 夺 干 个 均 可 ， 多 个 参数 之 间 使 用 
们 符号 隔 开 。 例 如 : 
1. <navigator url="../new/new?2date=20180803"™"> 


<button type-"primary"> 跳 转 到 新 页 面 打 开 新 内 容 </button> 
3. </navigator> 


上 述 代 码 表示 在 打开 新 页 面 的 同时 传递 了 date=20180803 这 条 数据 给 新 页 面 使 用 。 
在 新 页 面 JS 文件 的 onLoad0 函 数 中 可 以 获取 到 该 参数 ， 代 码 如 下 : 
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1. Page (1{ 

po onLoad: function(options) I{ 

console.1log (options.date);// 将 在 控制 侣 打印 输出 20180803 
本 } 

= 


【 例 4-21】 导航 组 件 navigator 的 简单 应 用 
主页 而 WXML (pages/demo04/navigator/navigator.wxml) 的 代码 卢 段 如 下 : 


1. <view class='titlLe>4. 导 航 组 件 navigator 的 简单 应用 </view> 
2. <VIeEw Class~='demo—box'> 

3 <View Class='title"'>»(1) 单 击 打 开 新 页 面 </view> 

4. <navigator url="../new/new"> 

5 。 <button type="primarvy"> 跳 转 到 新 页 面 打开 新 内 容 </button> 
6 . </navigator> 

171. </view> 


8. <view CasSs= aemo 一 DoX > 

= <Vliew Class="'title'> (2) 单 击 重 定 同 到 新 页 面 </view> 

10. <navigator url="../redirect/redirect™ open-type="'redirect'> 
i <button EvEie="BEimry "SE 当前 页 重新 打开 新 内 容 </button> 

12. </navigator> 

13.</view> 


新 页 面 新 内 容 的 WXML (pages/demo04/new/new.wxml) 的 代码 片段 如 下 : 
<text> 新 窗口 打开 的 新 页 面 ， 可 以 返回 navigator.wxml</text> 


当前 页 面 新 内 容 的 WXML (pages/demo04/redirect/redirect.wxml〉 的 代码 厂 段 如 下 : 
<text> 香 定 同 的 新 页 面 ， 无 法 返回 navigator.wxml</text> 


wo FA— Mp 一 
运行 效果 如 图 4-35 所 示 。 
重生 重生 而 NEChat 到 向 -26 1 重重 本 二 寺 Ne hat 二、 本 
例题 CEM 口 生生 下 < 例证 DEMO 
a | 新 窗口 打开 的 新 负面， 可 以 返回 重 定 向 的 新 页 面 ， 无 法 返回 navigator.WXmm| 
第 4 章 小 程序 组 件 navigator.wxml 
4. 导航 组 件 navigator 的 简单 应 用 
(1) 蛙 击 打开 新 页 面 


跳 转 到 新 页 面 打 开 新 内 容 


(2) 单 击 重 定向 到 新 页 面 


Wr 
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(a) 页面 初始 效果 (b) 新 负面 打开 新 内 容 (c) 当前 和 由 章 新 打开 新 内 容 


图 4-35 ”导航 组 件 navigator 的 简单 应 用 
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【代码 说 明 】 

本 示例 共有 3 个 页 面 ， 即 初始 页 面 navigatorwxml、 新 页 面 内 容 new.wxml、 重 定向 内 容 
redirect.wxml 。 在 初始 页 面 使 用 了 两 个 <navigator> 组 件 分 别 用 于 打开 newwxml 和 
redirect.wxml。 由 图 4-35 可 见 ， 新 页 面 打 开 的 新 内 容 可 以 返回 初始 页 面 ， 相 当 于 在 初始 页 面 
上 方 又 覆盖 了 一 层 新 页 面 ; 而 重 定 同 打 开 的 新 内 容 是 无 法 返回 初始 页 面 的 ， 相 当 于 直接 蔡 换 
控 了 初始 页 面 的 内 容 。 


并 体 组 件 目 前 主要 包含 4 种， 如 表 4-42 所 示 。 
表 4-42 媒体 组 件 


组 件 名 称 说 明 
audio 首 频 组 件 
limage 图 片 组 件 
video 视频 组 件 
camera 相机 组 件 


4.0.1 audio 
<audio> 是 首 频 组 件 ， 可 以 用 于 播放 本 地 或 网 络 首 频 。 该 组件 对 应 的 属性 如 表 4-43 所 示 。 


表 4-43 audio 组 件 属性 
属 性 名 说 明 
id stng | audio 组 件 的 唯一 标识 符 
me | | 要 播放 音频 的 资源 地 二 
loop 是 否 循环 播放 
controls 是 否 显示 默 认 控 件 


ce 默认 控件 上 的 音频 封面 的 图 片 资 源 地 址 ， 如 果 
Eo WE controls 属性 值 为 flse， 则 设置 poster 无 效 
未 知 兰 频 默认 控件 上 的 音频 名 字 , 如 果 controls 属性 值 为 false， 
name String \ 百 4 则 设置 name 无 效 


es Eee | “ | 当 开始 /继续 播放 时 触发 play 事 件 
bindpause | EveatHandle | ， | 当 和 暂停 播放 时 触发 pause 事 件 


sai | Pradae | | pmoe qu 
{currentTime, duration?} 


bindended ”EventHandle | | 当 播 放 到 末尾 时 触发 ended 事件 


其 中 binderror 属性 触发 后 的 返回 值 MediaError.code 共有 4 种 取 值 ， 说 明 如 下 。 
。 获取 资源 和 被 用 户 茶 止 。 

e 网 络 错误 。 

。 解码 错误 。 

。 不 合适 资源 。 


了 微 信 小 程序 开发 零 基础 入 门 


【 例 4-22】 妹 体 组 件 audio 的 简单 应 用 
WXML (pages/demo0S/audio/audio .wxml) 的 代码 上 请 段 如 下 : 


1. <view class='title'>5 .媒体 组 件 audio 的 简单 应 用 </view> 
2. <View Class='demo—box'> 
3. <view Class='"'title'> 播 放 网 络 首 频 </view> 视频 讲解 
a <aucdlo id="myAudio" poster="{{poster}}"”" name="{{namel}}" 

author="{ {author}}™ src="{{src}}™ controls loop></audio> 
Se <button size="mini" bindtap='audioPlay’' > 播放 </button> 


6. <button size="mini'’ bindtap-'audioPause'> 罩 个 </button> 
he <button size="minil'’ bindtap-"'audioSeek0'> 回 到 开头 </button> 


8. </view> 


WXSS (pages/demo05/audio/audio.wxss) 代 人 如 下 : 
1. buttont 


过世 margin: lO0rpx; 
ee 


JS (pages/demo0S/audio/audio.js) 的 代码 片段 如 下 : 


1. Page lt{ 
2 data: { 
3 poster: ‘http://Yy.gtimg.cn/music/photo new/TOO02R300x300M000003rsKF44 


GyaSsSk.Jpg?max age=2292000", 

上 name: ' 此 时 此 刻 '， 

i author: ' 许 狐 ' 

6. src: 'http://ws.stream.gqqmusic.gqgq.com/M500001VfvsJ21xFqgb .mp3?guid=ffff 
fftff82def4af4bl2b3cd933/doe /guin=34689 /220gvkey=6292FD51E1E384E06DCBDC 
9AB ICA49FD/13D632D313AC4858BACB8DDD23906 /D3C601481D36E62053BF8DFEAF /4C0 
ADCCEADD64 111160CAF 3E6A&fromtag=46" 


了 } ， 

8. audioPlay: function(options)} (| 
ps this.audioCtx.play() 

10. 上 

11- audioPanse: functiont(toptions) 1 
12. this.audioCtx.pause () 

13- 上 

14. audioSeek0: functijont(options) { 
15 this.audiocCctx.seek (0) 

le6. 上 

li. onReady: functiont(} { 

18. this.audioCtx = wx.createAudioContext ("myAudio") 
190 1 

20. |) 


运行 效果 如 图 4-36 所 示 。 

【代码 说 明 】 

本 示例 在 audio.wxml 中 放置 了 一 个 <audio> 组 件 (用 于 播放 网 络 音频 ) 和 3 个 <button> 
按钮 (分 别 用 于 控制 普 频 的 播放 、 蜀 停 和 回 到 开头 )， 其 中 <audio> 组 件 的 相关 属性 值 均 在 
audio.js 的 data 中 填写 ， 包括 首 频 封面 图 片 、 歌 曲名 、 演 唱 者 和 首 频 来 源 ，3 个 按钮 对 应 的 单 
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击 事件 分 别 是 audioPlay、audioPause 和 audioSeek0， 这 3 个 目 定 义 图 数 均 在 audio.js 中 进行 
了 声明 。 

在 图 4-36 中 ， 图 (a) 为 页 面 初始 状态 ， 此 时 可 以 显示 音频 图 片 、 歌 曲名 、 演 唱 者 和 当 
前 首 频 处 于 0 分 0 秒 ; 图 (b) 是 早 击 了 “播放 ”按钮 后 的 效果 ， 此 时 播放 0 分 2 秒 并 正在 继 
续 ， 目 音频 图 片上 的 按钮 图 标 发 生 了 改变 ， 图 (e) 是 单 击 了 “暂停 ” 按钮 后 的 效果 ， 此 时 揪 
放 到 0 分 41 秒 并 停止 ， 且 音频 图 片上 的 按钮 图 标 又 切换 回 初 始 状态 。 


TTTT WeChat 二 1 可 TTTT WU 忆 伺 上 本 上 - 合 16:50 重重 硬 硬 硬 WEChat 全 16:50 


< 例题 DEMO sd 例题 DEMO 例 晤 DEMOQ 
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播放 网 络 音频 


此 时 此 刻 


播放 网 络 音频 播放 网 络 音频 
此 时 此 刻 0 a 此 时 此 刻 


二 2 和 干 到 


Esp 
暂停 回 到 开头 暂停 回 到 开头 播放 暂停 回 到 开头 


名 微 信 小 程序 开发 地 基础 入 门 加 微 信 小 程序 开发 地 基础 入 站 加 微 信 小 程序 开发 零 基础 入 门 


(a) 页 面 初始 效果 Cb) 正在 播放 效果 (c) 暂停 效果 
图 4-36 ”媒体 组 件 audio 的 简单 应 用 
4.0.2 lmasgpe 
<image> 是 图 片 组 件 , 可 以 用 于 显示 本 地 或 网 络 图 片 , 其 默认 宽度 为 300px、 高 度 为 225px。 
该 组 件 对 应 的 属性 如 表 4-44 所 示 。 
表 4-44 image 组 件 属性 


属性 名 默认 但 最 低 版 本 
sc |Sting | | 图 片 资源 地 址 
mode 图 片 裁 前 、 缩 放 的 模式 


引 厂 全 | 只 科 对 page 与 scroll-view 下 的 image 
有 况 


本 当 钳 误 发 生 时 及 布 到 AppService 的 事件 名 ， 事 件 对 
es ae 象 event.detail = {errMsg: 'something Wrong'} 
当 图 片 载 入 完毕 时 发 布 到 AppService 的 事件 名 ， 事 
bindload | HandleEvent 件 对 象 event.detail = {height:" 图 片 高 度 px', width:' 
片 宽度 px 


注意 : <image> 组 件 的 mode 属性 用 于 控制 图 片 的 裁剪 、 缩 放 ， 根 据 所 填 入 的 不 同 有 效 
值 会 形成 13 种 模式 ， 即 4 种 缩放 模式 和 9 种 裁 前 模式， 具体 情况 如 表 4-45 所 示 。 
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缩放 模式 


水 
划 
由 
县 


于 DOJ] TN 


表 4-45 image 组 件 的 mode 属性 的 有 效 值 

说 明 
scaleToFill 不 保持 纵横 比 缩放 图 片 ， 使 图 片 的 宽 融 完全 拉 伸 至 填 清 image 元 系 
保持 纵横 比 缩放 图 片 ， 使 图 片 的 长 边 能 完全 显示 出 来 ， 也 就 是 说 可 以 完整 
地 将 图 片 显示 出 来 
保持 纵横 比 缩放 图 片 ， 只 保证 图 片 的 短 边 能 完全 显示 出 来 ， 也 就 是 说 图 片 
通 遂 只 在 水 平 或 牌 直 方 癌 是 完整 的 ， 另 一 个 方 同 将 会 肥 生 截取 
widthFix 宽度 不 变 ， 高 度 自动 变化 ， 保 持原 图 宽 高 比 不 变 
不 缩放 图 片 ， 只 显示 图 片 的 项 部 区 域 


aspectFlt 


aspectF1ll 


i 
党 
™ 


top 3 
不 盎 放 图 片 ， 只 显示 图 厂 的 后 部 区 域 
不 风 放 图 片 ， 只 显示 图 片 的 中 间 区 域 


不 绩 放 图 上 三， : 示 图 片 的 左边 区 域 
不 盎 帮 图 片 ， 只 显示 图 片 的 右边 区 域 
top left 不 绵 放 图 片 ， 只 显示 图 片 的 左上 边区 域 
top right 不 顷 放 图 片 ， 只 显示 图 片 的 石上 边区 域 
bottom left 不 顷 放 图 片 ， 只 显示 图 片 的 左下 边区 域 
bottom right “| 不 风 放 图 片 ， 只 显示 图 片 的 右 下 边区 域 


【 例 4-23】 媒体 组 件 image 的 简单 应 用 
WXML (pages/demo0S/image/image.wxml) 的 代码 片段 如 下 : 


汪 
了 


| 


. <view class='title'>5 .媒体 组 件 jmadge 的 简 持 应 用 </view> 2 
. <Vview Class='demo—box'> a 
<View Class='title'>(]) 顷 放 模式 : ScaleToFill</view> 视频 讲解 


<image src='{{src}}' mode='scaleToFill'></image> 


<view class='title'> 不 保持 纵横 比 缩放 图 片 ， 使 图 片 完 全 适应 </view> 


. </view> 
. <VIeEw Class='demo—box'> 


<View Class='title'> (2) 缩放 模式 : aspectFit</view> 
<image src='{{src}}' mode='aspectFit'></image> 


0. <view class='title> 保 持 纵横 比 缩放 图 片 ， 使 图 片 的 长 边 能 完全 显示 出 来 </view> 
11 .</view> 
12.<view Class='demo—box'> 
13. <view Class="title" > (3)} 缩放 模式 : aspectFill</view> 
14 <image src="'{{src}}' mode='aspectFill'></image> 
19 <VIeEw Class='title"' > 保持 纵横 比 缩放 图 片 ， 只 保证 图 片 的 短 边 能 完全 显示 出 来 </view> 
16.</view> 
li.<view class='demo—box'> 
18 <View Class="'title'">(4) 缩放 模式 : WidthFix</view> 
19. <image src="'{{src}}' mode='widthFix'></image> 
?0 <View Class='title" > 宽度 不 变 ， 高 度 目 动 概 化， 保持 原 图 宽 高 比 不 变 < /view> 
21 .</view> 
22.<Vliew Class='demo—box'> 
之子 <view class='title'>(5) 裁 部 异 式 : top</view> 
?4 <image src="'{{src}}' mode='top'></image> 
25. <View CaSS= 七 1 七 已” > 不 缩放 图 片 ， 只 显示 图 上 厂 的 顶部 人 区域 </view> 
26.</vVview> 
.<view Class='demo—box'> 
28 <view class='title>(6) 栽 副 模 式 : bottom</view> 
2 <image src="{{src}}' mode='bottom'></image> 
30 <Vview Class='title" > 不 缩放 网 卢 ， 只 显示 图 片 的 压 部 区 域 </view> 
31 .</view> 
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32.<Vliew Class="'demo—box'> 

33. <view class='title'>(7}) 栽 且 模 式 : center</view> 

34. <image src="'{{src}}" mode='center'></image> 

39. <VvView Class='title" > 不 纺 放 图 片 ， 只 显示 图 片 的 中 间 区 域 </view> 
36.</view> 

31.<view Class="demo—box'> 

38. <view class='titler>(81) 裁 如 模式 : left</wview> 

39. <image src='{{src}}" mode='left'></image> 

40. <view class='title5> 不 缩放 图 片 ， 只 显示 图 片 的 左边 区 域 < /view> 
41 .< /view> 

42.<Vview Class='demo—box'> 

43. <view Class='title'>(9) 裁 副 模式 : right</view> 

44. <image src='{{src}}' mode='right'></image> 

45. <view class='title'> 丰 纵 放 图 片 ， 只 显示 图 片 的 右边 区 域 </view> 
46.</vVview> 

41.<view Class="'demo—box'> 

48. ”< 过 VIEW class='title'>(10) 裁 前 模式 : top left</view> 

49. <image src="'{{src}}" mode='top left'"'></image> 

50. <view class='title'> 不 缩放 图 片 ， 只 显示 图 片 的 左上 边区 域 </view> 
D5] </ view> 

DZ.<View Class='demo—box'> 

53. <view class='title'>(11) 裁 如 模式 : top right</view> 

54- <image src='{{src}}' mode='top right'></image> 

55. <view class='title'> 不 缩放 图 片 ， 只 显示 图 片 的 右上 边区 域 </view> 
56.</view> 

Di.<vVview Class='demo—box'> 

28. <view Class='title'>(12) 裁剪 模式 : bottom left</view> 

59. <image src='{{src}}' mode='bottom left'></image> 

60. <view Class="'title" > 不 绑 放 图 片 ， 只 显示 图 片 的 左下 边区 域 </view> 
61 .过 /iew> 

62 .<Vview Class="'demo—box'> 

3. <view CaSsS= 七 1 七 人 > (13) 裁 副 模式 : bottom right</view> 

64. <image src="{{src}}' mode='top left'></image> 

65. <view class='title'> 丰 顷 放 图 片 ， 只 显示 图 片 的 右 下 边区 域 </view> 


66.</view> 


WXSS (pages/demo05/image/image.wxss) 的 代码 片段 如 下 : 


1. Imaget 

a width: 260rpx; 
Se heigqght: 260rpx; 
es 


JS (pages/demo0S/imasge/image.js) 的 代码 片段 如 下 : 


1 [| 

data: I 

二 src:'/images/demo05/monalisa.jpg' 
ee } 


2. 月 


本 示例 使 用 了 位 于 项 目的 Images 下 demo05 文件 夹 中 的 辽 材 图 片 monalisa.jpg， 该 图 片 
的 实际 尺寸 为 320x480 像 系 。 系 材 图 片 来 自 于 达 ， 分 奇 的 名 男 《 蒙 娜 丽 莎 》，， 原 图 如 图 4-37 
所 示 。 
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图 4-37 《 蒙 娜 丽 莎 》 素 材 图 
运行 效果 如 图 4-38 所 示 。 


(1) 缩放 模式 : scaleToFill (2) 缩放 模式 : aspectFit 


网 保持 纵横 比 缩放 图 片 ， 使 图 片 的 长 边 能 完 
不 保持 纵横 比 缩放 图 片 ， 使 图 片 完全 适应 全 显示 出 来 


(a) 缩放 模式 : scaleToFill (b) 缩放 模式 :aspectFit 


(4) 缩放 模式 : widthFix 


(3) 缩放 模式 : aspectFill 
w 本 | 


= ~ | 一 性 
保持 纵横 比 缩放 图 片 ， 只 保证 图 片 的 短 边 宽度 不 变 ， 高 度 自 动 变化 ， 保 持原 图 宽 高 
能 完全 显示 出 来 比 不 变 
(c) 缩放 模式 : aspectFill (d) 缩放 模式 : widthFix 
(5) 裁 筋 模式 : top (6) 裁剪 模式 : bottom 


不 绽放 图 片 ， 只 显示 图 片 的 顶部 区 域 不 缩放 图 片 ， 只 显示 图 片 的 底部 区 域 
(e) 裁 前 模式 : top (f) 裁剪 模式 : bottom 


(7) 裁剪 模式 : center (8) 裁剪 模式 : left 


不 绢 放 图 片 ， 只 显示 图 片 的 中 间 区 域 不 缩放 图 片 ， 只 显示 图 片 的 左边 区 域 


(g) 裁剪 模式 : center (h) 裁 前 模式 :le 如 


图 4-38 ”媒体 组 件 image 的 简单 应 用 
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(9) 裁 前 模式 : right (10) 裁剪 模式 : top left 


不 缩放 图 片 ， 只 显示 图 片 的 右边 区 域 不 编 放 图 片 ， 只 显示 图 片 的 左上 边区 域 
Gi) 裁剪 模式 ，right Gj) 裁剪 模式 : top left 


(11) 裁剪 模式 : top right (12) 裁剪 模式 : bottom left 


不 缩放 图 片 ， 只 显示 图 片 的 右上 边区 域 不 缩放 图 片 ， 只 显示 图 片 的 左下 边区 域 


(k) 裁剪 模式 : top right (1) 裁剪 模式 ;bottom left 


(13) 裁剪 模式 : bottom right 


不 纺 放 图 片 ， 只 显示 图 片 的 右 下 边区 域 
(m) 裁 胸 模式 : bottom right 
图 4-38 ( 续 ) 

【代码 说 明 】 

本 示例 在 image.wxml 中 声明 了 13 个 <image> 组 件 ， 其 系 材 来 源 于 同一 幅 图 片 。 在 
image.wxss 中 声明 <image> 组 件 的 尺寸 为 260rpxx260rpx。 根据 <image> 组 件 的 mode 属性 全 不 
同 ， 共 形成 13 种 缩放 或 裁 能 效果 。 

4.0.3 Video 

<video> 是 视频 组 件 ， 可 用 于 播放 本 地 或 网 络 视频 资源 ， 其 默认 宽度 为 300px、 高 度 为 

225Spx。 充 组 件 对 应 的 第 用 属性 如 表 4-46 所 示 。 
es 4-46 ”video 组 件 常 用 属性 


属性 名 | 类 型 | 默认 值 | 《 “说 明 | 最 低 版 本 


src 要 播放 视频 的 资源 地 址 
initial-time Number ”| | 指定 视频 初始 播放 位 置 1.6.0 
duration Number | | 指定 视频 时 长 1.1.0 


ee ， 。 | 是 否 显示 默认 播放 控件 (播放 /暂停 按 
z | “| 钮 、 播 放 进 度 、 时 间 ) 
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续 表 


属 性 名 最 低 版 本 


danmu-lis _Object Amay | | 弹 幕 列表 


i z 是 否 显示 弹 幕 按钮 ， 只 在 初始 化 时 有 
danmu-btn Boolean false 效 ， 不 能 动态 变更 


a I 是 否 展示 弹 幕 ， 只 在 初始 化 时 有 效 ， 不 
ETiale-LLciLiIiUL ICONJLEEIl 能 动态 变更 


autoplay _Boolean 。 | false | 是 否 自动 播放 
loop 是 否 循环 播放 
muted _Boolean | false | 是 否 静 音 播放 


page-gesture Boolean false 企 非 全 屏 模式 下 厦 合 开局 车 度 与 首 量 
| “| 调节 手势 


设置 全 屏 时 视频 的 方向 , 不 指定 则 根据 
宽 遍 比 目 动 判断。 其 有 效 信 为 0〈 正 各 
竖 同 ) 、90【〈 屏 幕 逆 时 针 90” ) 、-90 
( 屏 右 顺 时 针 90”) 

show-progress Boolean | me 右 个 设置 ， 当 宽度 大 于 240 时 才 会 显示 
show-fullscreen-btn Boolean | me | 是 侣 显示 全 拼 按 钮 

show-play-btm Boolean | true | 是 否 显示 视频 底部 控制 栏 中 的 播放 按钮 
show-center-play-btn Boolean | me |: 是 吾 显 示 视 频 中 间 的 播放 按钮 
enable-proegress-gesture Boolean | tme | 是 是 人 玫 开 局 控制 进度 的 手势 


当 视 频 大 小 与 video 容器 大 小 不 一 致 时 
objectFit String contain | 视频 的 表现 形式 .其 中 ,contain 为 包含 ， 
fill 为 填充 ，cover 为 履 凑 


视频 封面 的 图 片 网 络 资源 地 址 ， 如 采 


direction 


poster controls 属性 人 为 false， 则 设置 poster 
无 效 
bindplay _EventHandle | ”| 当 开始 /继续 播放 时 触发 play 事件 


pindpause vontHandle | | 当 暂 停 播 放 时 角 发 pause 事 人 


bindended EventHandle | | 当 播 放 到 末尾 时 触发 ended 事件 

当 播 放 进 度 变 化 时 触 友 ，event.detail = 
bindtimeupdate EventHandle {currentTime，duration} ， 人 触发 冉 率 为 

250ms 一 次 

当 视 频 进 入 和 退出 全 屏 时 触及， 
bindfullscreenchange EventHandle event.detall = {fullScreen. direction!, 


direction 取 佣 闵 vertical 或 horizontal 


bindwaiting EventHandle | ”| 当 视频 出 现 缓冲 时 触发 
binderror _EventHandle | ”| 当 视 频 播放 出 错时 触发 


【 例 4-24】 媒体 组 件 video 的 简单 应 用 
WXML (pages/demo0S/video/video.wxml) 的 代码 片段 如 下 : 


.<view class='title'>5- 媒 体 组 件 video 的 简单 应 用 </view> 

. <View Class='demo—box'> 

<view class='"'title'> 播 放 网 络 视频 </view> 

<Vlideo id—"myVideo™ src="{{src}}” danmu—list="{{danmuList}}" 
enable-danmu danmu-btn controls></video> 

. </view> 


户 Lu ho 请 


Cn 


1.4.0 
1.4.0 


1.6.0 


1.7.0 


1.9.0 
1.9.0 
Lo 
1.9.0 
1.9.0 
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WXSS (pages/demo05/video/video.wxss) 的 代码 片段 如 下 : 
1 。 videolf 


和 width: 100%; 
3 中 


JS (pages/demo05$/video/video.]s) 的 代 人 码 厂 段 如 下 : 


1. Page (i{ 
下 data: I 
Se src: http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30 


280201010421301f0201630402534804102ca905ce620bl241bi126bc4ldcff44e0020 

4012882540400&bizid=1023t&thy=SH&fileparam=302c020101042530230204136ff 

d93020457e3c4ff02024ef202031le8d7f02030f42400204045a320a02010004007"， 
el danmuList: | 


之 { 

6 . text: ?第 1s 出 现 的 补 蚌 ' ， 
Ms color: "yellow', 

号- time: 1 

ER }s 

10. { 

Ll text: "第 3s 出 现 的 弹 各 "， 
下 = COLor: ‘purple', 

Ls time: 3 

14- }] 

a }, 

16. onReady: function() { 

ee this.videoContext=wx.createVideoContext ("myVideo") 
1 

193.1}) 


运行 效果 如 图 4-39 所 示 。 
而 日 鲁 而 证 hal 过 21:44 100% 本 |)， | sreee Wechat sa 21:45 ' 21:45 


例 本 DEMGO bods | 例题 DEMO 二 DEMO 


第 4 章 小 程序 组 件 第 4 音 小 程序 组 件 第 4 童 小 程序 组 件 
5. 媒体 组 件 video 的 简单 应 用 5. 媒体 组 件 video 的 简单 应 用 5. 媒体 组 件 video 的 简单 应 用 


播放 网 络 视频 播放 网 络 视频 播放 网 络 视 频 
| 
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3 
腾 污 大 学 
rr 


一 == 
已 微 信 小 程序 开发 零 基础 入 站 折 微 信 小 程序 开发 零 基础 入 站 名 微 信 小 程序 开发 零 基础 入 门 


(a) 页 面 初始 效果 (b) 第 1 秒 出 现 的 弹 幕 效果 (c) 第 3 和 出 现 的 弹 幕 效果 


4-39 ”媒体 组 件 video 的 简单 应 用 


1 微 信 小 程序 开发 零 基 础 入 门 


【代码 说 明 】 


本 示例 选用 了 人 微 信 官方 提供 的 一 段 网 络 视频 作为 <video> 组 件 的 视频 来 源 ， 并 在 video.js 
的 data 中 定义 了 danmuList 用 于 显示 两 段 弹 幕 。 在 图 4-39 中 ， 图 (a) 为 页 面 初 始 效 果 ， 此 
时 视频 加 载 完 毕 需 要 手动 单 击 播放 ; 图 (b) 和 图 (ce) 分 别 为 播放 型 


弹 幕 效果 。 


4.0.4 camera 


<camera> 是 系统 相机 组 件 ， 从 基础 库 1.6.0 开始 支持 ， 低 版 本 需要 做 莱 容 处 理 。 在 真 机 


4 


测试 时 ， 震 要 用 户 授权 scope.camera。 访 组 件 对 应 的 彰 用 属性 如 表 4-47 所 示 。 


表 4-47 camera 组 件 常 用 属性 


属 性 名 
mode Sting | nomal 
device-position 


有 效 值 为 normal、scanCode 
前 置 或 后 置 ， 值 为 front 或 back 


闪光 灯 ， 值 为 auto、on、off 


扫 公 识别 区 域 ， 格 式 为 [x, y, w, h]， 其 中 x、y 
是 相对 于 camera 显示 区 域 的 左上 角 , Ww、h 为 


TY 区 域 宽度 , 单位 为 bx, 仅 在 mode-"scanCodey 
时 生效 

pndsop | Emmae | | 诈 

binderror EventHandle | | 当 用 户 不 允许 使 用 摄像 头 时 触发 


在 成 功 识别 到 一 维 码 时 触发 ， 仅 在 


注意 : 更 多 用 法 见 第 6 章 “ 媒 体 API”. 


【 例 4-2S】 媒体 组 件 camera 的 简单 应 用 
WXML (pages/demo0S/cameray/cameraWxml ) 的 代码 卢 段 如 下 : 


1. <view class='title'>5 .媒体 组 件 video 的 简单 应 用 </view> 
2. <View Cass= aqQemo 一 口 CO 和 > _ 
a 视频 i 
和 <view class='title'> 开 启 相 机 </view> 饮 频 讲解 
4. <Camera device—position="back™ flash="off™ style="width: 100%; height: 


300px; "></camera> 
he <button type="primary™ binadtap="takePhoton> 提 照 </button> 
避 - <image wx:if="{{src}}™”™ mode="widthFix™ src="{{src}}"></image> 
1717. </view> 


JS (pages/demo05/camera/camera.js〉 的 代码 片段 如 下 : 


1. Page l(t{ 

takePhoto() { 

3 this.ctx.takePhotolt(t 

4. quality: "high"', 

时 SUCCeSS: (res) => | 

6. this.setData({src: res.tempIimagePatht}) 
了 了- } 

8. }) 

了 了. bs 


第 1 秒 和 第 3 秒 出 现 的 


EE: 


2.1.0 


2.1.0 


2.1.0 
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lO0. onLoad: function(options)} { 
11: this.ctx=wx.createCameraContext () 


13.1) 


运行 效 末 如 图 4-40 所 示 。 


上 F 午 10:50 9 i 中 国 睛 全 所 上 村 


例题 DEMO | 例题 DEMO 


第 4 章 小 程序 组 件 
5. 媒体 组 件 video 的 简单 应 用 


开局 相机 


"代码 小 实验 " 要 使 用 你 
的 摄像 头 ， 是 否 允许 ? 


多 微 信 小 程序 开发 零 基 础 入 门 


允 微 信 小 程序 开发 零 基础 入 站 


(a) 用 户 授权 访问 摄像 头 (b) 开局 相机 (c) 拍照 预览 图 
图 4-40 ”媒体 组 件 camera 的 简单 应 用 


【代码 说 明 】 

本 示例 在 camera.wxml 声明 了 一 个 <camera> 组 件 用 于 开启 相机 ， 其 状态 为 后 置 摄像 头 以 
及 关闭 闪光 灯 效 果 。 在 <camera> 组 件 下 方 放 置 了 一 个 <button> 按 钮 ， 并 为 其 绑 定 目 定 义 单 击 
事件 takePhoto， 用 户 单 击 “ 拍 照 ” 按 钮 后 即 可 实现 拍照 功能 。 在 该 按钮 下 方 是 <image> 组 件 ， 
用 于 显示 拍摄 完成 后 的 预览 照片 。 

在 图 4-40 中 ， 图 (a) 是 用 户 初次 访问 示例 页 面 ， 需 要 用 户 授权 访问 摄像 头 ; 图 (b) 是 
用 户 授 权 后 的 页 面 效 果 ， 此 时 可 以 单 击 按钮 进行 招 照 ， 图 (c) 为 担 照 后 的 效果 ， 由 该 图 可 见 
在 按钮 下 方 出 现 了 刚才 拍摄 的 预览 图 片 。 


<map> 是 地 图 组 件 ， 根 据 指定 的 中 心经 纬度 可 以 使 用 腾讯 地 图 显示 对 应 的 地 段 。 
其 相关 属性 如 表 4-48 所 示 。 


表 4-48 map 组 件 常用 属性 


属 性 名 最 低 版 本 
longitude 
latitude 


scale 缩放 级 别 ， 取 值 范围 为 5 一 18， 其 默认 值 为 16 


markers 


属 性 名 最 低 版 本 
ATTaV 


save BT 和 和 隐情 全 用 waters 人 


controls 即将 废弃 ， 请 使 用 cover-view 替代 
include-pomts 绵 放 视野 以 包含 所 有 给 定 的 坐标 点 


show-location 显示 和 市 有 方 回 的 当前 定位 点 

bindmarkertap 单 击 标记 点 时 触发 ， 会 返回 marker 的 id 

bindcallouttap 早 击 标记 点 对 应 的 气泡 时 触 友 ， 会 返回 marker 的 id 1.2.0 
bindcontroltap 早 击 控件 时 触发 ， 会 返回 control 的 1d 

bindregionchange 当 视 野 友 生变 化 时 触及 

bindtap 


bindupdated 在 地 图 泻 染 更 新 完成 时 触发 1.6.0 


例如 生成 一 个 北京 故 号 博物 阮 的 地 图 ，WXML 代 公 如 下 : 


<map latitude="39.917940"7 longitude="116.397140"></map> 


注意 : 如 果 经 纬度 不 确定 ， 可 以 使 用 腾讯 坐标 拾取 器 ( http://lbs.qq.conytool/getpoint/ 
index.html ) 进行 查询 。 


<map> 组 件 默认 大 小 为 300 像素 x150 像素 ， 该 矿 寸 可 以 重新 目 定义 ，WXSS 代码 如 下 : 


。 Iapi 
width: 1l100%; 
height: 600rpx; 
} 


必 LO [oa 捕 


最 终 效果 如 图 4-41 所 示 。 


图 4-41 地 图 组 件 map 的 简单 应 用 


4.7.1 markers 


makers 属性 表示 标记 点 ， 可 以 用 于 在 地 图 上 显示 标记 的 位 置 。 该 属性 值 是 以 数组 (Array 


关 型 ) 形式 记录 全 部 的 标记 点 信息 ， 每 个 数组 元 素 用 于 显示 其 中 一 个 标记 点 。 数 组 元 聚 可 包 
含 的 属性 如 表 4-49 所 示 。 
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表 4-49 markers 常用 属性 


属性 | 说 明 | 类 型 | 必 填 | 备 。 注 


marker 单 市 事件 回调 会 返回 此 1, 建议 用 户 为 每 个 
id 标记 点 id Number 全 marker 设置 Number 类 型 稚 id, 以 保证 更 新 marker 
时 有 更 好 的 性 能 
ET 季 刘 到 ， 苑 围 为 -5050 


ongiude 学 点 数 ， 苑 围 为 -180 180 
二 -下 


umber 
String 


title 标注 反 名 Sting | 否 

re ,。 | 项目 目录 下 的 图 片 路 径 , 支持 相对 路 径 写 法 , 以 “17 

i 夺 | 开头 表示 相对 小 程序 根 目录 ， 它 也 支持 临时 路 径 

rotate 旋转 角度 顺 时 针 旋 转 的 角度 ， 范 围 为 0 一 360， 默 认为 0 

alpha ”| 标注 的 透明 度 默认 为 1， 无 透明 ， 范 围 为 0 一 1 

width 标注 图 标 宽度 默认 为 图 片 实际 宽度 

height ”| 标注 图 标高 度 默认 为 图 片 实际 高 度 

re 支持 的 属性 见 表 4-50, 可 识别 换行 符 (最 低 版 本 为 12.0) 

iabel ”| 为 标记 点 旁边 增加 标签 支持 的 属性 见 表 4-51, 可 识别 换行 符 (最 低 版 本 为 12.0) 

nchoe | 经 纬度 在 标注 图 标的 二 | {x,y}, xX 表示 横向 (0 一 1) ，y 表 示 竖 向 (0 一 1) 。 

ncho 错 点， 默认 为 底 边 中 点 ] {X: .5,y: 1} 表 示 确 边 中 点 。 其 最 低 版 本 为 1.2.0 
callout 


在 自 定 义 标记 点 的 上 方 可 以 使 用 callout 属性 显示 气泡 窗口 ， 其 包含 的 属性 如 表 4-50 所 示 。 


表 4-50 callout 常用 属性 


属性 说 ”月 最 低 版 本 
color 120 
fonSize 120 
borderRadins 120 
er 120 
i 120 
display BYCLICK': 单 击 显示 ; 'ALWAYS': 常 显 1.2.0 
textAlien 文本 对 章 方式 ， 有 效 伍 为 le 全 、Tight、center String 1.6.0 

label 

在 自 定义 标记 点 旁 可 用 label 属性 增加 标签 ， 其 包含 的 属性 如 表 4-51 所 示 。 

表 4-51 label 常用 属性 

属性 RE: 
content 可 1.2.0 
color 1.2.0 
tontSlze 1.2.0 
破 1.2.0 
y 1.2.0 
anchorX 2.1.0 
anchorY 2.1.0 
bordor Width L160 
borderColor 边框 闯 包 String 1.6.0 
borderRadins 160 
bgColor 村 景 攻 1.6.0 
padding i 1.6.0 
textAlpn 1.6.0 
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4.7.2 polyline 


polyline 属性 用 于 指定 一 系列 坐标 点 ， 从 数组 第 一 项 连 线 至 最 后 一 项 ， 其 包含 的 属性 如 


表 4-52 所 示 。 
表 4-52 ”polyline 常用 属性 


属 ”性 最 低 版 本 


points 经 纬度 数组 [flatitade: 0. longitude: 01] 


color ee -。 | 用 8 位 十 六 进 制 数 表示 ， 后 两 
位 表示 alpha 值 ,例如 #000000aa 

widih Nomber | 否 

dotedLine 

dl ETE EE 

borderColor 否 

borderWidth ae | 理 | | 


4.7.3 circles 
circles 属性 用 于 在 地 图 上 显示 圆 形 区 域 ， 其 包含 的 属性 如 表 4-53 所 示 。 


4-53 circles 常用 属性 


ongitde 本 Er 半点 数 ， 范 围 为 -180 ~ 180 
二 


color 
例如 #000000aa 

fillColor 用 8 位 十 六 进 制 数 表示 ， 后 两 位 表示 alpha 值 ， 
例如 #000000aa 

radimus 

stroke Width 


【 例 4-26】 地 图 组 件 map 的 简单 应 用 
WXML (pages/demo06/map/map.wxml) 的 代码 片段 如 下 : 


1. <view class='titler>6- 地 图 组 件 map 的 简单 应 用 < /view> 
2. <View Class="'demo—box'> : 
3 <view class='title'> 北 京 故 言 博物 院 </view> 视频 讲解 
4. <map latitude="{{latitude}}" longitude="{{longitude}}" markers="'1{markers}}" 
bindreglionchange="reglonChange'> 
Se </map> 
6. </view> 
WXSS (pages/demo06/map/map.wxss) 的 代码 片段 如 下 : 
1. mapl 
a width: 1l100%; 
Er height: 600rpx; 
7) 


JS (pages/demo06/map/map.js 〉 的 代码 片段 如 下 : 


1.2.0 


1.6.0 
1.2.0 
1.2.0 


用 8 位 十 六 进 制 数 表 示 ， 后 两 位 表示 alpha 值 ， 
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1. Page l(t{ 

2 data: 1 

3 latitude: 393-317940， 

4. longitude: ll6e.391140, 
Sy markers: | 1!{ 

6. od 

I latitude: 39.9171940, 
2 longitude: 116-397140， 
二 iconPpPath:"/images/demo06/location.png', 
10. label:1 

le content:' 故宫 博物 院 ' 
是 | 

1 3 上 

下 


1>- IegionChange: functionl(le) { 


16. console.1log('regionChange 被 触发 ， 视 时 发 生变 化 。'); 
| 
18.}) 


运行 效果 如 图 4-42 所 示 。 


重重 重重 面 [所 万 hat 全 11:08 100% [El 各 重 重生 二 NeChat 到 11:09 
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(a) 页 面 初 始 效 采 (b) 移动 地 图 的 视野 效果 


[Kw Console Sources Network Security Audits Storage AppData 


( | top YFilter Defa 


人 regionchange 被 触发 ， 视 时 发 生变 化 ， 
2 


(c) 移动 地 图 后 Console 控 1 


训 台 输出 的 内 容 


图 4-42 ”地 图 组 件 map 的 简单 应 用 


L539 


和 中 微 信 小 程序 开发 零 基 础 入 门 “ 蕊 jy 


式 为 宽 100%、 高 600rpx。 在 map.js 的 data 中 设置 了 经 纬度 坐标 和 标记 点 信 
轧 《 标 记 点 4、 图 标 、 标 签 文本 内 容 )。 


内 容 都 正 闻 显示; 图 (b) 是 移动 地 图 的 视野 效果 ， 地 图 可 以 在 指定 尺寸 中 


【代码 说 明 】 
本 示例 在 map.wxml 中 声明 了 一 个 <map> 组 件 用 于 显示 地 图 ， 并 在 map.wxss 中 定义 式样 


在 图 4-42 中 ， 图 (a) 是 页 面 初始 效果 ， 由 该 图 可 见 标 记 扣 图 标 和 标 作 


任意 改变 视野 ; 图 (ec) 是 移动 地 图 后 Console 控制 台 输 出 的 内 容 。 视频 讲解 


<canvas> 为 画布 组 件 ， 其 默认 尺寸 是 宽度 为 300px、 高 度 为 225px。 
该 组 件 对 应 的 利用 属性 如 表 4-54 所 示 。 


表 4-54 canvas 组 件 常 用 属性 


属 性 名 本 说 明 
canvas-id EE canvas 组 件 的 唯一 标识 符 
0 汪 在 canvas 中 移动 且 有 乡 定 手势 事件 时 茶 止 屏 医 
深 动 以 及 下 拉 刷 新 
bindtouchstart EventHandle 一 手指 触 挽 动作 开始 


bindtouchmove ‘EventHande | 手指 触摸 后 移动 
bindtouchend EE 手指 触摸 动作 结束 


bindtouchcancel EventHan EventHande | 手指 触摸 动作 被 打 断 ， 例 如 来 电 提 醒 、 弹 窗 


ee 手指 长 按 500ms 之 后 触发 ， 在 触发 了 长 按 事 件 后 
证 进行 移动 不 会 触发 屏幕 的 滚动 
RE Eee | 妆 久 生 蚀 次 时 触 色 error 事件 ，detail = {errMsg: 
'something wrong'} 


例如 : 


<Canvas canvas—-id="myCanvas™" style="border:lrpx solid™" ></canvas> 


上 述 代码 表示 声明 了 一 个 带 有 1lrpx 宽 、 黑色 实 线 边框 的 画布 , 其 canvas-id 为 myCanvas。 
需要 注意 的 是 ,同一 页 面 中 的 canvas-id 不 可 重复 如果 使 用 一 个 已 经 出 现 过 的 canvas-id， 


该 canvas 标签 对 应 的 男 布 将 被 隐藏 且 不 再 正 稼 工作 。 


在 <canvas> 组 件 声明 完毕 后 ， 一 个 简单 的 画图 工作 主要 分 为 以 下 3 个 步骤 。 
e。 步骤 1: 声明 男 布 上 下 文 〈CanvasContext ) 。 

。 步骤 2: 使 用 画布 上 下 文 进行 绘图 描述 (例如 设置 画笔 颜色 和 绘制 内 容 )。 
e。 步骤 3: 男 图 。 

上 述 画 图 步骤 需要 将 代 但 与 到 JS 文件 的 onLoad0 函 数 中 ， 例 如 : 


paqge li 
onLoad: function(options) 1 
/ /1 .创建 画布 上 下 文 
const ctx=wx.createCanvasContext ("myCanvas’'") 
//2 .设置 填充 闫 色 
ctx.setEF1iliStvylel('orange')} 


//3-. 设 置 填充 区 域 为 矩形 


9 Cex LIReetl20r ZO0r Ts0r B80) 


> //4. 男 图 
10. ctx.drawt) 


运行 效 末 如 图 4-43 所 示 。 


4-43 画布 组 件 canvas 的 简单 应 用 
当前 只 是 画布 的 简单 应 用 ， 读 者 可 查看 第 11 章 “ 界 面 API” 学 习 关 于 男 布 的 更 多 用 法 。 


本 音 主 要 介绍 小 程序 网 络 API 的 相关 应 用 ， 小 程序 允许 使 用 本 章 介 绍 的 接口 与 开发 者 或 
第 三 方 服务 器 进行 通信 ， 包 括 友 起 请 求 和 文件 的 上 传 / 下 载 。 
习 目 标 

了 解 小 程序 /服务 器 架构 ; 

掌握 服务 器 域名 配置 和 临时 服务 器 部 署 ; 

掌握 wx.request() 接 口 的 用 法 ; 

学 握 wxuploadFileO0 和 wx.downFileO 接 口 的 用 法 。 


小 程序 允许 使 用 网 络 API 和 服务 器 进行 通信 , 包括 发 起 请 求 、 文 件 的 上 传 和 下 载 等 功能 。 
5.1.1 小 程序 /服务 伏 架 构 


小 程序 和 服务 器 通信 的 架构 也 可 以 称 为 C/S 架构， 即 客户 端 /服务 器 〈ClientServer) 架 
构 。 小 程序 和 服务 器 的 通信 原理 大 致 如 图 5-1 所 示 。 


1. 发 起 请 求 


3. 返回 数据 


4 处 理 数据 2 处 理 请 求 


图 5-1 小 程序 和 服务 帮 遂 信 原 理 示 意图 


在 联网 的 状态 下 小 程序 首先 向 服务 器 发 起 网 络 请 求 ， 可 携 融 JSON 格式 数据 一 并 发 送 过 
去 。 服 务 胡 收 到 请 求 后 执行 相关 代码 处 理 请 求 ， 必 要 时 还 可 以 从 后 六 合 询 数 据 库 。 处 理 完 于 
后 服务 器 问 小 程序 回复 并 返回 数据 ， 小 程序 相关 接口 将 回调 success0 函 数 并 对 拿 到 的 数据 进 
行 后 续 处 理 。 

关于 请 求 

小 程序 同 服 务 句 发 起 网 络 请 求 ， 注 间 事 项 如 下 : 


TS 微 信 小 程序 开发 零 基 础 入 门 “ 克 kr 


(1) 默认 超时 时 间 和 最 大 超时 时 间 都 是 60s。 

(2) request、uploadFile、downloadFile 的 最 大 并 发 限制 是 10 个 。 

(3) 网 络 请 求 的 referer header 不 可 设置 。 其 格式 回 定 为 “https:/servicewechatcony fappidy/ 
{version}/page-frame.html”， 其 中 {appid} 为 小 程序 的 appid，{version} 为 小 程序 的 版 本 写 ， 版 
本 号 为 0 表示 为 开 友 版 、 体 验 版 以 及 审核 版 本 ,版 本 号 为 devtools 表示 为 开发 者 二 具 ， 其 余 
为 正式 版 本 。 

(4) 小 程序 进入 后 台 运 行 后 《〈 非 置顶 聊天 )， 如 果 在 5s 内 网 络 请 求 没 有 结束 ， 会 回调 钳 
误 信 息 fail interrupted; 在 回 到 前 台 之 前 ， 网 络 请 求 接口 调用 部 会 无 法 调用 。 

关于 服务 器 返回 

1) 返回 值 编码 

小 程序 会 目 动 对 BOM 头 进行 过 滤 , 且 建议 服务 堆 返 回 值 使 用 UTF-8 编码 ,对 于 非 UTF-8 
编 合 ， 小 程序 会 符 试 进行 转换 ， 但 是 会 有 转换 矢 败 的 可 能 。 

2) 回调 

只 要 成 功 接收 到 服务 璐 返回 ， 无 论 statusCode 是 多 少 ， 部 会 进入 success0O 回 调 。 请 开 友 
音 根 据 业 务 包 和 辑 对 返回 全 进行 判断 。 

关于 JSON 语法 格式 

小 程序 网 络 API 在 发 起 网 络 请 求 时 使 用 JSON 格式 的 文本 进行 数据 交换 。 

JSON (JavaScript Object Notation ) 是 基于 JavaScript Programming Laneuage, Standard 
ECMA-262 3rd Edition - Dec1999 的 一 个 子 集 ， 是 一 种 轻 量 级 的 数据 交换 格式 。 它 采用 完全 独 
立 于 语言 的 文本 格式 , 易于 人 们 阅读 和 编写 ; 但 是 也 使 用 了 类 似 于 C 语言 家 族 ( 包 括 C、C++、 
C#、Java、JavaScript、Perl、Python 等 ) 的 习惯 ,因此 也 易于 机 占 解 析 和 生成 。 这 些 特性 使 
JSON 成 为 理想 的 数据 交换 语言 。 

JSON 字符 串通 前 有 两 种 构建 形式 ， 一 是 “名 称 / 值 ” 对 的 集合 ， 二 十 值 的 有 厅 列 表 。 

1) “名 称 / 人 ”对 的 集合 

“名 称 / 值 > 对 Cname/value pair) 的 集合 在 不 同 的 计算 机 语言 中 可 以 被 理解 为 对 象 Cobject)、 
记录 (record)、 结 构 (struct)、 宁 典 (dictionary )、 哈 市 表 (hash table )、 有 和 键 列表 (keyed list ) 
或 关联 数组 (associative array) 等 。 

名 称 可 以 由 开 有 友 者 目 定 义 ， 例 如 studentID、username 等 ; 全 是 目 定义 名 称 所 对 应 的 数据 
值 ， 共 有 以 下 6 种 类 型 的 取 值 。 

。 string: 字符 串 ， 需 要 用 引号 括 起 来 ， 例 如 hello'。 
number: 数 伍 ， 例 如 123 。 
boolean: 布尔 伍 ， 例 如 false。 
null:，， 衬 值 ， 例 如 null。 
object: 对 象 ， 例 如 {fusername: 'admin', password: '123456abc'}。 
array: 数组 ， 例 如 [1,2,3,4,5]。 

上 述 这 些 取 值 类 型 可 以 互相 骨 套 形成 复合 的 值 。 
“名 称 / 值 ” 对 的 集合 通 铝 使 用 大 括号 包 舍 里 面 的 全 部 内 容 ， 示 例 格式 如 下 : 


名 称 人 :全 


{HY 第 5 章 网 络 AP| 加 江 


例如 : 
/ /1 -单个 名 称 / 值 对 


Var Tsonl=1lx: 123} 


//2 .多 个 名 称 / 值 对 


War Toone — lr T7230 X27 “hello yy sz3 Ernel 


//3- 髓 天 组 合 的 名 称 / 值 对 

Var Json3=! 
> 
hedle:s 


soy | 
wi le 
i 1 Md ls 
} 


如 采 想 获得 json3 中 的 yl 的 值 false， 写 法 是 json3.x3.y]。 
这 里 以 微 信用 户 信息 数据 为 例 ， 返 回 的 JSON 文本 如 下 : 
detail: 1 
userinfo: I 
nickname: ' 张 二 '， 


加 三 加 辐 E je 
city: Shanghnal 


上 


2) 值 的 有 序列 表 
值 的 有 序列 表 在 绝 大 部 分 计算 机 语言 中 均 可 以 被 理解 为 数组 (array)。 
值 的 有 序列 表 通 季 使 用 中 括号 包含 里 历 的 全 部 内 容 ， 示 例 格 式 如 下 : 


值 1， 
值 2， 


值 


这 里 值 的 类 型 与 前 面 “ 型 完全 一 样 ， 不 再 歼 述 


例如 : 
/ /1 .数字 取 值 


Var Jsonl=[11ll,222,333] 


名 称 / 值 ” 对 的 集合 中 的 取 值 类 


//2 .布尔 值 取 值 


Var JSson2=[true,false,truel 


/1/3 .对 象 取 值 

Var JSson3=| 
{username: "zhangsan'y, password : "Tl23', Ccity : Wuhu}, 
lusername- "lisilis Password: “A507 City: "Heiler' lsy 


TS 微 信 小 程序 开发 零 基 础 入 门 “ 克 yt 


{username: “Wandgwu ， password: 189 ，， city: “XUamcCheng 上 


] 
如 果 想 要 获取 json3 中 第 1 个 用 户 所 在 的 城市 ， 写 法 是 json3[0].city。 
5.1.2 ”服务 如 域名 配置 
每 一 个 小 程序 在 与 指定 域名 地 址 进行 网 络 通信 前 都 必须 将 该 域 
台 白 名 单 中 。 
配置 流程 


小 程序 开发 者 登录 mp.welixin.qq.com 进入 管理 员 后 台 ， 音 击 “ 设 置 ?， 在 “ 开 太 设置” 
下 的 “服务 器 域名 ”中 添加 或 修改 需要 进行 网 络 通信 的 服务 器 域名 地 址 ， 如 图 5-2 所 示 。 


3 地 址 语 加 到 党 理 员 后 


开发 者 ID 


四 目 


征 志 者 [CD 


BEICN 畦 麻 [01) 


BoESecretl rete 


外 
2 


服务 器 域名 


图 5-2 ”服务 怖 域名 配置 


开 友 者 可 以 填 入 目 己 或 第 三 方 的 服务 絮 域 名 地 址 ， 但 在 配置 时 需要 注意 以 下 几 操 : 

(1) 域名 只 文 持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 
协议 。 

(2) 域名 不 能 使 用 IP 地 址 或 localhost。 

(3) 域名 必须 经 过 ICP 备案 。 

(4) 出 于 安全 考虑 ，api.weixin.qq.com 不 能 被 配置 为 服务 右 域 名 ， 相 天 API 也 不 能 在 小 
程序 内 调用 。 开 友 者 应 将 appsecret 保存 到 后 台 服 务 器 中 ， 退 过 服务 器 使 用 appsecret 获取 
accesstoken， 并 调用 相关 API。 

(5) 每 类 接口 分 别 可 以 配置 最 多 20 个 域名 。 

配置 完 之 后 册 登 录 小 程序 开 有 工具 束 可 以 测试 小 程序 与 指定 的 服务 豆 域 名 地 址 之 间 的 
网 络 通 信和 情况 了， 注意 每 个 月 只 可 以 申请 修改 5 识 。 

HTTPS 证 书 

需要 注意 的 是 ， 小 程 订 必 须 使 用 HTTPS 请 求 ， 普 通 的 HTTP 请 求 是 不能 用 于 正式 环境 
的 。 判 断 HITPS 请 求 的 依据 是 小 程序 内 会 对 服务 器 域名 使 用 的 HTTPS 证 书 进 行 校 验 ， 如 果 
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校 验 失败 ， 则 请 求 不 能 成 功 友 起 。 

因此 开发 者 如 果 选 择 上 自己 的 服务 器 ， 需 要 在 服务 器 上 目 行 安装 HTTPS 证 书 ， 选 择 第 二 
方 服务 费 则 确保 其 HITPS 证 书 有 效 即 可 。 小 程序 对 证 书 的 要 求 如 下 : 

(1) HTTPS 证 书 必 须 有 效 。 证 书 必 须 被 系统 信任 ， 部 着 SSL 证 书 的 网 站 域名 必须 与 证 
书 颁 发 的 域名 一 致 ， 证 书 必 须 在 有 效 期 内 。 

(2) iOS 不 支持 日 签 名 证 书 。 

(3) 1OS 下 的 证 书 必须 满足 苹果 App Transport Security (ATS) 的 要 求 。 

(4) TLS 必须 支持 1.2 及 以 上 版 本 。 部 分 旧 Android 机 型 还 未 支持 TLS 1.2， 请 确保 
HTTPS 服务 右 的 TLS 版 本 文 持 1.2 及 以 下 版 本 。 

(5) 部 分 CA 可 能 不 人 被 操作 系统 信任 (例如 Chrome 56/57 内 核对 WoSign、StartCom 证 
书 限制 )， 请 开发 者 在 选择 证 书 时 注意 小 程序 和 各 系统 的 相关 通告 。 

由 于 系统 限制 ， 不 同 平 台 对 于 证 书 要 求 的 严格 程度 不 同 。 为 了 保证 小 程序 的 羔 容 性 ， 建 
议 开 及 者 按照 最 高 标准 进行 证 书 配 置 ， 并 使 用 相关 工具 检查 现 有 证 书 是 否 符合 要 求 。 

跳 过 域名 校 验 

如 果 开 发 者 暂时 无 法 登记 有 效 域名 ， 可 以 在 开发 和 测试 环 记 暂时 跳 过 域名 校 验 。 具 体 做 
法 是 在 微 信 web 开发 者 工具 中 找到 右上 角 的 “详情 ”按钮 ， 单 击 打开 浮 窗 ， 然 后 勾 选 “不 校 
验 合法 域名 、web-view〔 业 务 域名 )、TLS 版 本 以 及 HTTPS 证 书 ” 复 选 枉 ， 如 图 5-3 所 示 。 

- ao 本 于 


代码 小 实验 


而 PPIC wxl 90 Mai ea 

本 地 目录 CASE 有 化 出 版 杜 \ 微 念 小 程序 作 门 .， 打 开 
广 件 系 纺 CU AppData\Local\ 微 信 ,.， 打开 
本 地 代码 。 21 kB 

上 次 预 绩 。 KB 上 星期 五 16:14 ) 

上 次 上 传 《无 


二 名 作息。 有 有 云 站 


调试 基础 库 1 名 .4 0.00 


ES6 转 ES5 | 
上 传代 码 时 样式 自动 补 全 
代码 上 传 时 自动 压缩 


图 5-3” 跳 过 域名 校 验 设置 
此 时 ， 在 开发 者 工具 中 运行 或 开局 手机 调试 模式 时 都 不 会 进行 服务 器 域名 的 校 验 。 
5.1.3 “临时 服务 器 部 团 


软件 部 嗜 
各 开发 者 条 件 受 限 ， 可 以 将 PC 庙 临 时 部 普 为 模拟 服务 器 进行 开 发 和 测试 。 小 程序 对 服 
务 右 问 没 有 软件 和 语言 的 限制 条 件 ， 用 户 可 以 根据 自己 的 实际 情况 选择 Apache、Negnix、 


微 信 小 程序 开发 零 基 础 入 门 区 


Tomcat 等 任意 一 亚 服 务 些 软件 进行 安 疼 部 普 ， 以 及 选用 PHP、Nodejs、J2EE 等 任意 一 种 语 
言 进行 后 端 开 友 。 

这 里 以 phpStudy 2016 套 闭 软件 (包含 了 Apache 和 PHP) 为 例 ， 部 普 步 骤 如 下 : 

(1) 下 载 安 装 包 ， 在 PC 病 中 双击 安装 。 

(2) 完成 后 局 动 Apache 服务 器 ， 如 图 5-4 所 示 。 

(3) 在 WWW 目录 下 创建 目 定 义 目 录 ， 例 如 minmiDemo。 

至 此 临时 部 背 完 毕 ， 用 户 可 以 随时 更 改 服务 句 上 的 目录 地 址 和 PHP 文件 代码 。 

济 phpStudy 2016 
运行 状态 hpstudy 启 售 


oo | | wn| 三 | 下 | 


运行 模式 一 TIE 你 本 


六 系统 服务 


人 丰 服 务 模式 


应 用 | 
MyS 伯 OL 管理 哈 ] 


如 其 他 选项 菜单 


5-4 启动 Apache 服务 器 


此 时 模拟 服务 器 已 经 局 动 。 

网 络 请 求 

服务 器 的 WWW 目录 就 是 根 目录 , 它 的 网 络 地 址 是 “http://localhost/ ”或 “http://127.0.0.1/”。 
开 肥 者 可 以 在 根 目 录 下 目 行 创建 目录 和 文件 , 例如 在 miniDemo 中 创建 了 test.php 文件 ， 那么 
网 络 请 求 地 址 就 是 “http://localhost/miniDemo/test.php ”。 

PHP 文件 的 返回 语句 是 echo， 例 如 : 


1. <2php 
2 echo “网 络 请 求 成 功 ! '; 
Ss > 


这 样 小 程序 将 会 收 到 引号 里 面 的 文字 内 容 。 开 发 者 也 可 以 直接 用 浏览 器 访问 该 地 址 ， 能 
获得 同样 的 文字 内 容 ， 因 此 可 以 在 开发 之 前 直接 使 用 浏览 器 测试 PHP 文件 是 否 正 确 。 

需要 注意 的 是 ， 本 地 模拟 服务 右 地 址 只 能 用 于 学 习 或 测试 阶段 ， 市 有 无 效 域名 的 小 程 订 
是 无 法 正 陈 用 布 上 线 的 。 未 来 在 正 陈 服务 硕 域 名 配置 成 功 后 ， 建 议 开 及 者 更 新 网 络 请 求 地 址 
开 在 各 平台 下 进行 测试 ， 以 确认 服务 占 域 名 配置 正确 。 


5.2.1 发 起 请 求 


小 程序 使 用 wx request(OBJECT) 发 起 网 络 请 求 ，OBJECT 参数 的 说 明 如 表 5-1 所 示 。 
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表 5-1 wx.request 函数 的 OBJECT 参数 


参数 说 明 
ul 开发 者 或 第 三 方 服务 器 接口 地 址 
data Object/String/ ArrayBuffer 6 请 求 的 参数 


header Object EE 设置 请 求 的 header， 在 header 中 不 能 设置 Referer 
i (其 中 content-type 默认 为 'application/json') 

method String 有 效 值 为 OPTIONS、GET、HEAD、POST、PUT、 
入 DELETE、TRACE、CONNECT (默认 值 是 GET) 

dataType String a 默认 值 为 json。 如 果 设 为 json， 会 尝试 对 返回 的 数 
据 做 一 次 JSON .parse 

responseITyp | String = 设置 啊 应 的 数据 类 型 ， 合 法 值 为 text、arraybuffer， 

e 默认 值 为 text， 最 低 版 本 为 1.7.0 


success() 收 到 服务 器 成 功 返 回 的 回调 函数 
Rail0 接口 调用 失败 的 回调 函数 


complete0 - “| 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 会 执 
行 ) 
successO 返 回 的 参数 如 表 5-2 所 示 。 


表 5-2 success() 返 回 参 数 


多 到 | 类 型 议 本 


| 


o 对 | 荡 


I 


data Object/String/ArrayBuffer | 开 上 友 者 服务 器 返回 的 数据 
statusCode 开发 者 服务 器 返回 的 HITP 状态 码 


header 开发 者 服务 器 返回 的 HTTP Response Header, 最 低 版 本 为 1.2.0 


wxXx.request(OBJECT) 示 例 代 人 码 如 下 : 


wxX.regquestl(t 


url: "https://test.com/',// 仪 为 示例 ， 并 非 真 实 的 接口 地 址 


data: 
2 / /数据 的 key 和 value 由 开发 者 和 目 定义 
Y: "4567" // 这 里 的 数据 仅 为 示例 

上 


SUCCess: function(res)} 1 


console.1log (res.data) 1/ 返回 的 数据 
} 
}) 


最 终 友 送 给 服务 器 的 data 数据 是 String 类 型 ， 如 果 传 入 的 data 是 其 他 类 型 ， 也 会 被 转换 
成 Strmg， 和 转换 规则 如 下 : 

(1) 对 于 GET 方法 的 数据 ,会 将 数据 转换 成 query string (keyl=valuel&key2value2… )。 

(2) 对 于 POST 方法 有 日 header['content-type'] 为 application/json 的 数据 ， 会 对 数据 进行 
JSON 序列 化 。 

(3) 对 于 POST 方法 且 header['content-type'] 为 application/Xx-www-form-urlencoded 的 数 
据 ， 会 将 数据 转换 成 query string (keyl=valuel&key2=value2… ) 。 


s.2.2 ”中断 请 求 


wx.request(OBJECT) 接 口 运 回 一 个 requestTask 对 象 ， 通 过 访 对 象 的 abortO 方 法 可 以 中 断 
请 求 任 务 。requestTask 对 象 的 方法 如 表 5-3 所 示 。 


开局 微 信 小 程序 开发 零 基础 入 门 


表 5-3 requestTask ee 


方 法 | 参数 | 说明 | 最 低 版 本 
abort0 | 无 _ 14.0 


注意 : 从 基础 库 1.4.0 开始 支持 ， 低 版 本 需要 做 兼容 处 理 。 


requestTask 对 象 的 示例 代码 如 下 : 


const requestTask=wx.regquest (1{ 
url: 'https://test.com/'，// 仪 为 示例 ， 并 非 真实 的 接口 地 址 
data: | 
x: '123， ， // 数 据 的 key 和 value 由 开发 者 目 定 义 
y: "456'  // 这 里 的 数据 仅 为 示例 
} 


success: function(res) 1{ 
Console.l1og (res.data) 


} 
1 


requestTask.abort() // 取 消 傅 求 任 务 


【 例 S-1】 网 络 请 求 的 简单 应 用 
WXML (pages/demo01/request/request.wxml)〉 文件 代码 如 下 : 


.<view class='title">1 .网 络 请 求 request</view> 

-. <VIiew ClLass= aemo 一 boXx > 

<view Class='title'>wx.request (OBJECT) </view> 
<input placeholder=' 请 输入 您 需要 查询 的 单词 ' bindblur='wordBlur'></input> 
<button type=" "pIrimary”™ bindtap="search"™"> 查 训 </button> 

<view class='status'> 释 义 : {{result}}</view> 

。< /View> 


下 


WXSS (pages/demo01/request/request.wxss) 文件 代码 如 下 : 


input,buttonl 
margin: lorpx; 

} 

-Statustl 
margin: lorpx; 
text—align: left; 

} 


下 


JS (pages/demo0lrequestrequestjs) 文件 代码 如 下 : 


1. Page l(t{ 

Wa data: 

result: ' 竺 查 伺 " 

4. 上 7 

5. word: '''， // 彻 始 化 单词 

6.  // 更 新 单词 

WOIrdBlur: function(e} I 

Se this.word=e.detail .value 


\D 


情书 
Ni 慷 避 ， 


上 7 
/ /但 询 单 词 
search: function(} I 
let word=this.word // 获 得 单词 
var that=this 


// 未 输入 内 容 


2 
HH 
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下 if (word=="") 1{ 

16. wx.ShowToastl(t{ 

区 更 title: 单词 不 能 为 空 ! '， 

18. 1con: “none- 

13. }) 

20. } 

2 // 友 起 网 络 请 求 

2 else 1 

Wt We WwWX -ITeGuest ({ 

2 url: 'https://api.shanbay.com/bdc/search/", 
Wd data: [| 

20. word: word 

2 1s }, 

4: SUCCeSS: function (res) 1{ 

We CONnSsole.1log (res.data) 

30- lIelt resulf = Tesdaladatlas cn deftinition defn 
31. that .setData({ result: result }) 
2 } 

33. }) 

34. } 

全 } 

36 - }) 


预览 效果 如 图 5-5 所 示 。 


重重 烛 名 二 eal < lid1 各 各 重生 Ehat 所 1102 TA } 二 和 二 利生 PC hat 二 11.09 
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第 5 童 网 络 API 第 5 章 网 络 API 第 5 章 网 络 API 
1. 网 络 请 求 request 1. 网 络 请 求 request 1. 网 络 请 求 request 


wx.request(OQBJECT) wax.requesttOQBJECT) Wx.requesttOQBJECT) 
apple 


: 尘 理 ， 半 纤 诊 释 W : n. 苹果 
释义 : 竺 查询 剃 语 HT 能 为 字 1 


局 微 信 小 程序 开发 零 基 础 入门 铝 微 信 小 袜 序 井上 友 寺 已 微 信 小 程序 开发 零 基础 人 | 


(a) 页 面 初 始 效果 (hb) 查询 时 的 错误 提示 (c) 单词 查询 结果 


(EK Console Sources Network Security Audits Storage AppData ‘Wxml Sensor Trace 
[ne tap BI Default levels ™ 


Wed Aug 22 2818 11:19:83 GMT+8888 【中 国标 准时 间 ) 配置 中 关闭 合法 域 逢 、web-view 业务 域 御 )、TLS 版 本 以 及 HTTPS 证 书 检查 
> 工具 未 校 验 音 法 域名 ，web-view 【业务 域名 ) 、TLS 版 本 以 有 HTTPS 证 书 
W {Msg "SUCCESS , status code: 8@, data: tt.}} 
二 器 二 证 己 : 
audio: "http:/ /media.shanbay .com/audio/us/apple.mp3" 
hb audio addresses: {Uk: Array(2), Us: Array(2)} 
audio name: "apple v3" 
bh cn definition: {pos "", defn: "“n, 苹果 "} 
conent id: 818 
过 启 商 上 上 语 让 芷 : " 二 BPle" 
content id: 918 


content type: "vocabulary" 


te er 


definitian: "” Nn. 


(d) Console 控制 台 输 出 网 络 请 求 的 回调 数据 
图 5-5 网 络 请 求 的 简单 应 用 


和 微 信 小 程序 开发 零 基 础 入 门 “并 F 


【代码 说 明 】 

本 示例 通过 使 用 wx.request 接口 同 第 三 方 开 源 API 有 友 起 网 络 请 求 进行 单词 得 向 。 在 
request wxml 中 包 人 台 了 =input> 和 输入 框 、<button> 按 钮 和 <view> 组 件 分 别 用 于 和 输入 单词 、 答 询 
单词 和 显示 中 文 释 义 。 在 requestjs 的 data 中 初始 定义 得 询 结 采 fresult} 为 “ 竺 得 询 ” 状 态 ， 
并 初始 化 页 面 变量 word 为 空 日 内 容 。 然 后 为 输入 框 绑 定 上 自 定 义 图 数 wordBlur0 监 听 失 去 焦点 
事件 ， 并 更 新 word 值 ， 为 撤 钮 绑 定 目 定 义 图 数 searchO 监 听 tap 单 击 事件 ， 如 采 word 无 内 容 
则 给 出 错误 握 示 ， 有 内 容 则 肥 起 网 络 请 求 ， 并 使 用 setData0 国 数 将 租 询 结 末 更 新 到 动态 数据 
{{result}} 中 ， 使 其 可 以 泻 染 到 request.wxml 页 面 上 。 

在 图 5-5 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 是 尚未 输入 单词 就 单 击 “查询 ”按钮 的 
效果 ， 此 时 会 出 现 错 误 提示 ; 图 (c) 是 输入 单词 apple 后 单 击 “ 碍 询 ” 按 钮 的 效果 ， 由 该 图 
可 见 此 时 成 功 友 起 了 网 络 请 求 拿 到 了 释义 数据 ; 图 (d) 为 查询 单 词 成 功 时 Console 控制 合 输 
出 的 结果 ， 由 该 图 可 见 除了 中 文 释义 外 还 包含 了 其 他 数据 ， 开 发 者 可 以 根据 实际 需要 选用 。 


文件 传输 主要 包含 文件 的 上 传 和 下 载 功能 ， 其 中 文件 上 传 功能 需要 配合 开 友 者 服务 右 使 
用 ; 文件 下 载 功能 使 用 开发 者 服务 右 或 第 三 方 服务 右 均 可 。 


5.3.1 文件 的 上 传 


文件 上 传 请 来 

小 程序 使 用 wx.uploadFile(OBJECT) 可 以 将 本 地 资源 上 传 到 开发 者 服务 右 , 在 上 传 时 将 从 
客户 端 发 起 一 个 HITPS POST 请 求 到 服务 器 ， 其 中 content-type 为 multipart/form-data。 

OBJECT 参数 的 说 明 如 表 5-4 所 示 。 


表 5-4 wx.uploadFile 函数 的 OBJECT 参数 
参数 说 明 
url 开发 者 服务 器 url 
filePath 要 上 传 文件 资源 的 路 径 
| 文件 对 应 的 key， 开 发 者 在 服务 器 端 通过 这 个 key 可 以 获取 到 文件 
ee Pep 下 | 的 二 进 制 内 容 
header HTTP 请 求 Header， 在 header 中 不 能 设置 Referer 
formData HTTP 请 求 中 其 他 额外 的 form data 
successO 接口 调用 成 功 的 回调 函数 
fail| 接口 调用 失败 的 回调 函数 


complete( 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 会 执行 ) 
success() 人 返回 参数 的 说 明 如 表 5-5 所 示 。 
表 5-5 success() 返 回 参 数 


参数 说 明 
data 开发 者 服务 器 返回 的 数据 
statusCode Number 开发 者 服务 器 返回 的 HITP 状态 码 


该 接口 可 以 配合 其 他 接口 一 起 使 用 , 例如 页 面 过 过 wx.chooseImasge 接口 获取 到 一 个 本 地 
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资源 的 临时 文件 路 径 后 可 以 通过 此 接口 类 


本 地 资源 上 传 到 指定 服务 右 。 示 例 代 人 码 如 下 : 


1 。 wx.chooselmage ({ 

2 Success: functionl(lres)} 1 

: var temprFilePaths=res.temprilePaths 
4 wxX.uploadFile(l 

3 


url:'https://example .weixin.qgq.com/upload'，// 仅 为 示例 ， 非 真实 的 接口 地 址 


c filepPath: temprFilePathsil0]|, 
Fe name: ‘file', 

9 formData:l 

= ‘user': ‘test" 

10. 上 7 

Ls success: function (res}t1 
= var data=~res.data 

1 3。 } 

下 Je }) 

Ye } 

ln }) 


上 传 任务 对 象 
wx.uploadFile(OBJECT) 接 口 返 回 一 个 uploadTask 对 象 , 退 过 该 对 象 可 监听 文件 上 传 进度 
变化 事件 以 及 取消 上 传 任务 。uploadTask 对 象 的 方法 如 表 5-6 所 示 。 
表 5-6 uploadTask 对 象 方法 
方 。 法 最 低 版 本 
onProgressUpdate0O 监听 上 传 进度 变化 1.4.0 
abort0 | 中 断 上 传 任务 1.4.0 


onProgressUpdate0O 返 回 参 数 的 说 明 如 下 


表 5-7 onProgressUpdate() 返 回 人 参数 


参数 说 明 


| 所 示 o 


progress 上 传 进 度 百 分 比 
totalBytesSent 已 经 上 传 的 数据 长 度 ， 单 位 为 Bytes 
totalBytesExpectedToSend 预期 需要 上 传 的 数据 总 长 度 ， 单 位 为 Bytes 


uploadTask 对 象 示例 代码 如 下 : 
-COonst uploadTask=wx .uploadFilel(t{ 


. 1}) 
. UpPploadTask.onProgressUpdate ( (res)})=>{ 
console.1og ("上 传 进度 '， res .progress) 


nn 


6. console.1log(" 已 经 上 传 的 数据 长 度 ， 7 Ies.totalBytesSent) 

console .1log(' 预 期 需要 上 传 的 数据 总 长 度 '， res.totalBytesExpectedToSendqd) 
8. 上) 

9. uploadTask.abort() / /取消 上 传 任务 


【 例 s-2】 文件 上 传 的 简单 应 用 
WXML (pages/demo02/upload/upload.wxml) 文件 代码 如 下 : 


1. <view class="'title'>2 .文件 上 传 / 下 载 </view> 
。 <V1iew Class~='demo—box'> 
<view Class="'title’'>wx.uploadFile (OBJECT) </view> 


Lu My 


和/ ” 微 信 小 程序 开发 零 基 础 入 门 “并 F 


2 <image wx:if='{{src}}' src='{{src}}' mode='widthFix'></image> 
与 <button bindtap="chooseImage"> 选 择 文 件 </button> 

6. <button type="pPrimary”™ pindtap="uploOadFilLe"™"> 和 开始 上 忧 </button> 
1. </view> 


WXSS (pages/demo02/upload/upload.wxss) 文件 代 人 码 如 下 : 


1 。 buttont 


和 margin: lorpx; 
ee] 
JS (pages/demo02/upload/upload.js〉 文 件 代码 如 下 : 
1. Page ({ 
ee data: I 
src: "， // 上 传 图 片 的 路 径 地 址 
4. }, 
5.  // 选 择 文 件 
6. chooseImage: function() 1{ 
es Var that=this 
8. wxXx.chooselmage ({ 
9 count: 1，// 默 认为 9 


sizeType: ['original','compressed"'],// 可 以 指定 是 原 图 还 是 压缩 图 ， 默 认 二 者 都 有 
sourceType: ['album'， '"'camera']， ，// 可 以 指定 来 源 古 相册 还 是 相机 , 默认 二 者 都 有 
success: function{(res) 1 
// 返 回 选 定 照片 的 本 地 文件 路 径 列 表 
let src=res.tempFilePpPaths[0| 
that.setDatal({ src: src }) 
} 
}) 
} 
// 上 传 文件 


PP pc 
DODJNT 人 A NPO' 
而 二 币 而 和 十 二 和 十 十 


?0 uploadFile: function()} 1{ 

| var that=this 

2 /7 获取 疼 片 路 径 地 址 

二 本 lJet src=this.data.src 

24. // 尚未 选择 图 片 

i | 

26 wix.ShowToastl(t{ 

2 title: 请 先 选 择 文 件 ! '， 

28 1ICon: “none- 

29 }) 

30 } 

3 /7 准备 上 传 文件 

EP else 1 

33 / /发 起 文件 上 传 请 求 

34. Var uploadTask=wx .uploadFile(l! 
3 url: 'http://localhost/miniDemo/upload.php'，// 可 以 僚 换 为 其 他 地 址 
36 filePath: src, 

3 name: "file', 

38 Success: function(res) { 

39 Console.1log (res) 

40 WX.ShowToast(t 

41. 七 七 Je: res.data 

42. }) 

43. } 

44. }) 

45. /7 监听 文件 上 传 进 度 

46 uploadTask.onProgressUpdate ( (res)=>1 
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A console.1logl('" 上 传 进度 '， res. progress) 

48. console .1log (' 已 经 上 传 的 数据 长 度 '， res.totalBytesSsent) 

49. console.1lod( 5 预期 需要 上 传 的 数据 总 长 度 ! ，res .totalBytesExpectedToSend) 
50 - }) 

Sh } 

2 } 

D3. | 


服务 井中 PHP (http://localhost/miniDemo/upload.php〉 文件 代码 如 下 : 


1. <?php 

2 if(!'iempty($ FILES['file"]))})I 

3 / /获取 扩展 名 

4. spathinfo~pathinfol(s$ FILES["file"']['name"]); 

i exename=strtolower (spathinfo[l'extension']);} 

6. / /检测 扩展 名 

Ws if(s$exename!l="'png' && Fexename!l="']Jpg' && Sexenamel!="'gif")I! 
DS echo (' 非 法 扩展 名 !'); 

ee } 

10. / /检测 通 过 

ls 全 SET 

| $imageSavePath='image/' .uniqid() .'.' .$exename; // 创 建文 件 路 径 
1 3 / /移动 上 传 文件 到 指定 位 置 

1 和- if(move uploaded file(s FILES['file' ltmp name']，93imageSavePath) ) { 
15. echo "上传 成 功 !'; 

16. } 

lie } 

18. } 

| | elsel 

a echa "Cc 传 大 W117" 

a } 

pa 


elles i Wechats 517 0 章 业 二 重量 WEL hat 过 15:17 100, [ml 
DENO 二 本 下 ADEMO i 国王 DEMO Es 加 
第 5 章 网 络 API 第 5 章 网 络 API 第 5 章 网 络 API 
2. 文件 上 传 /下 载 2. 区 件 上 传 /下 载 2 文件 上 传 /下 载 


wx.uploadFiletOBJECT) wx.uploadFilet OBJECT) wx.uploadFile(OBJECT) 


选择 文件 


已 微 信 小 程序 开发 零 基 础 入 门 


选择 文件 


局 微 信 小 程序 开发 零 基础 入 门 驯 微 信 小 程序 开发 霉 基 础 入 |] 


(a) 负面 初始 效 术 (b》 选 择 图 片 文件 (ec) 上 传 成 功 


5-6 ”文件 上 传 的 简单 应 用 


一 微 信 小 程序 开发 零 基 础 入 门 “ 丰 y 


Console Sources Network Secuyrity Storage AppData Wxml Sensor Trace 


下 Filter Default levels ™ 


| Wed Aug 22 2818 15:18:88 GMT+8868 (中 国标 准时 间 ) 配置 中 关闭 合法 域名 、web-view (业务 域名 ) 、TLS 版 本 以 及 HTTPS 证 书 检查 
|a A Bp 工具 未 校 验 合法 域名 、web-view〔 业 务 域名 、TLS 版 本 以 及 HTTPS 证 书 。 

上 传 进度 18@ 

己 经 上 传 的 数据 长 度 18353 

预 期 需要 上 传 的 数据 总 长 度 18353 

Vv{istatuscode: 288, data: " L/WI", errMsg: "uplLoadFilLe:ok"} 
data: “上 传 成 功 1" 
errMse: "UploadFile:ok" 
statusCcode: 288 

bp proto__: Object 


(d) 文件 上 传 过 程 中 Console 控制 台 的 输出 内 容 
图 5-6 ( 续 ) 


【代码 说 明了】 

本 示例 在 upload.wxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 选择 图 片 和 上 传 图 片 ,对 应 的 
目 定 义 图 数 分 别 是 chooseImageO0 和 uploadFileO0。 如 采 疝 未 选择 文件 承 上 传 会 有 铬 误 握 示 。 选 
择 好 图 片 文件 后 会 在 页 面 的 <image> 组 件 中 显示 出 来 ， 在 图 片 选择 完成 后 单 击 “开始 上 传 ” 
按钮 将 调用 wx.uploadFileO 接 口 进行 上 传 。 服 务 絮 问 使 用 PHP 文件 upload.php 接收 文件 ， 首 
和 完 检 测 图 三 文件 扩展 名 是 否 从 合 要 求 ， 检 测 通 过 后 将 文件 重 命 名 并 存放 在 服务 器 当前 目录 下 
的 image 文件 炎 中 。 用 户 可 以 退 过 检测 服务 器 指定 文件 炎 中 是 人 否 有 上 传 的 图 片 来 证 明示 例 是 
侣 成功。 

在 图 5-6 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 尚未 选择 文件 ， 图 (b) 是 选择 图 片 后 的 效 
果 ， 此 时 指定 的 图 厂 将 显示 在 页 面 上 ; 图 (c) 是 文件 上 传 成 功 的 消息 提示 : 图 (d) 是 上 传 
过 程 中 Console 控制 台 的 输出 内 容 , 该 内 容 是 由 uploadTask 对 象 的 监听 事件 onProgressUpdate 
实现 的 ， 由 该 图 可 见 输 出 语句 只 在 下 载 完 毕 〈 下 载 进度 为 100%) 时 出 现 了 一 次 。 显 示 次 数 
与 文件 大 小 和 网 速 有 天， 不 同 设备 、 文 件 和 网 络 环境 可 能 存在 差 开 。 


S.3.2 ”文件 的 下 载 
文件 下 载 请 求 
小 程序 使 用 wx.downloadFile(OBJECT) 可 以 从 服务 右 下 载 文 件 资 源 到 本 地 ，OBJEC 参数 
的 说 明 如 表 5-8 所 示 。 


表 5-8 wx.downloadFile() 函 数 的 OBJECT 参数 
re 网 
ul am 下 载 资源 的 ul 
header 一 HTTP 请 求 Header， 在 header 中 不 能 设置 Referer 


success() Function 下 载 成 功 后 以 tempFilePath 的 形式 传 给 负面 ，res={tempFilePath: 
文件 的 临时 路 径 ” 


接口 调用 失败 的 回调 函数 
0 Ee 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


success0 返 回 的 参数 如 表 5-9 所 示 。 


Fonction 
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表 5-9 success() 返 回 的 参数 


参 数 | 类 型 说 了 明 


tempFilePath 临时 文件 路 径 ， 下 载 后 的 文件 会 存储 到 一 个 临时 文件 
i 开发 者 服务 器 返回 的 HTTP 状态 


下 载 文 件 的 原理 是 客户 端 直 接 发 起 一 个 HTTP GET 请 求 ， 返 回 文件 的 本 地 临时 路 径 。 需 
要 注意 的 是 ， 本 地 临时 路 径 文件 在 小 程序 本 次 局 动 期 间 可 以 正常 使 用 ， 如 需 持久 保存 ， 需 要 
主动 调用 wx.saveFile0 才 能 在 小 程序 下 次 启动 时 访问 得 到 。 

wx.downloadFile(OBJECT) 示 例 代 码 如 下 : 


1 。 wx.downloadFilel(t 

是 url: https://example.com/audio/123", // 仅 为 示例 ， 并 非 真 实 的 资源 

了 SUCCESS: function(res} 1 

4 // 只 要 服务 器 有 啊 应 数据 ， 束 会 把 啊 应 内 容 写 入 文件 并 进入 success () 回调， 业务 需要 目 行 判 
// 断 是 否 下载 到 了 想 要 的 内 容 

DD 1 二 (res.statusCodeQ=——~—~200) 1 

6. console.l1og (res.tempFrFilePath) / /文件 临时 路 径 地 址 

Te 

8. } . 

3. 1) 


下 载 任务 对 象 
wx.downloadFile(OBJECT) 返 回 一 个 downloadTask 对 象 ， 通 过 downloadTask 可 监听 下 载 
进度 变化 事件 以 及 取消 下 载 任务 。 该 接口 从 基础 库 1.4.0 开始 支持 ， 低 版 本 需要 做 兼容 处 理 。 
downloadTask 对 象 的 方法 如 表 5-10 所 示 。 
表 5-10 downloadTask 对 象 方法 
方 。 法 参数 最 低 版 本 

onProegressUpdate() 监听 下 载 进 度 变 化 1.4.0 
abort0 中 断 下 载 任务 1.4.0 


onProgressUpdateO 返 回 参数 的 说 明 如 表 5-11 所 示 。 


表 5-11 ProgressUpdate() 方 法 参数 


估 六 吏 


progress 下 载 进 度 和 白 分 比 
totalBytesWritten 己 经 下 载 的 数据 长 度 ， 单 位 为 Bytes 
totalBytesExpectedToWrite 预期 需要 下 载 的 数据 总 长 度 ， 单 位 为 Bytes 


downloadTask 对 和 象 的 示例 代码 如 下 : 
. Const downloadTask=wx.downloadFilel(t{ 


}) 

. downloadTask.onProgressUpdatel( (res} => 1{ 

Console.1o0g(" 下 载 进 度 ， ITCo nroadqressl 

Console.1logt(" 己 经 下 载 的 数据 长 度 ， 7 IeEs.totalBytesWritten) 
console.1log(' 预 期 需要 下 载 的 数据 总 长 度 ' ，Fres .上 totalBYtesExpectedToWrIte) 
- }) 

. downloadTask.abort () // 取 消 下 载 任 务 


ID DD] 
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nn 
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EY 
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ws 
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.<view class='titler>2. 娘 件 上 传 / 下 载 < /view> 
- <View Class="'demo—box'> 


【 例 $-3】 文件 下 载 的 简 音 应 用 
WXML (pages/demo02/download/download.wxml ) 文件 代码 如 下 : 


<View Class='title'>wx.downloadFile (OBJECT) </view> 
<block wx:1f={{isDownloadl}}'> 
<image mode='widthFix" src='{{src}}'></image> 
<button pindtap-—"reset"3 了 如 自 </BULCOn> 
</bplock> 
<button wx:else type="primary” bindtap="down1load"> 单 击 此 处 下 载 图 片 </button> 


. 所 /ViewW> 


JS (pages/demo02/download/download.js) 文件 代码 如 下 : 


Page(({ 
- data: { 
isDownload: false 
} 
/ /下 载 图 片 文件 
download: functiont()} I 
var that=this 
/ /开始 下 载 
var downloadTask=wx.downloadFilel(t 
url: http://img06.tooopen.com/images/20180821/tooopen sl 135625 
562533875. Jpg'"，V// 用 户 可 目 行 更 换 
SUCCeSS: function(res) 1 
// 只 要 服务 器 有 啊 应 数据 ， 束 会 把 啊 应 内 容 写 入 文件 并 进入 success () 回调 ， 业 务 
// 需 要 目 行 判断 是 否 下 载 到 了 想 要 的 内 容 
1 二 (res.statusCodeQ———200) 1 
let src=res .tempbpEilePath// 文件 的 临时 路 径 地 址 
七 是 己 七 . 3 七 Da 七 忌 ({ 
站 
1sDownload: true 
}) 
} 
} 
1 
// 任 务 对 象 监听 下 载 进度 
downloadTask .onProgressUpdate( (res)=>1{ 
Console.logl(" 下 载 进 度 '， res. progress) 
Console.1logl(" 己 经 下 载 的 数据 长 度 ' rr Ies.totalBytesWritten)} 
console.1og (' 预 期 需要 下 载 的 数据 总 长 度 '， res .totalBytesExpectedToWrite) 
ny 
ls 
/ /清空 下 载 图 片 
reset: function() { 
this.setDatal(t 
有 届 人 
isDownload:false 
}) 
} 
- }) 


预览 效果 如 图 5-7 所 示 。 
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面 生 重重 WE hat 全 111 重生 要 要 二 WE hat 二 12:12 


例 同 DEMO 例题 DEMO 
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wx.downloadFile(OBJECT) 


A 


wx.downloadFile(OQBJECT) 


忆 微 信 小 程序 开发 零 基 础 入 门 


写 微 信 小 程序 开发 零 基础 入 门 


(al 页 和 面 初 妈 效 果 (b) 文件 下 载 成 功 


[K Console Sources Network Security Storage AppData Wxml Sensor “Trace 
(y | top v | Filter Default levels 了 
7 Wed Aug 22 2818 12:88:48 GMT+88868 【中国 标准 时间 ) 配置 中 天 闭合 法 域名 、web-view( 业 和 劳 域 和 名) 、TLS 版 本 以 太 HTTPS 证 书 榨 伍 
是 工 具 未 楼 验 合法 域 莉 、wWeb-Vview《 业 和 芳 咸 着 ) 、TLS 版 本 以 及 HTTPS 证 书 。 
下载 进 度 16 
己 经 下 载 的 数据 长 度 3986 
所 期 需要 下 载 的 数据 总 长 度 23296 


下 载 进度 198 
己 经 下 载 的 刍 扩 长 度 23296 
所 期 需要 下 载 的 数据 总 长 度 23296 


4《c) 文件 下 载 过 程 中 Console 控制 台 的 输出 内 容 


5-7 ”文件 下 载 的 简单 应 用 


【 代 码 说明】 

本 示例 在 download wxml 中 使 用 wx:if 和 wx:else 属性 切换 显示 内 容 。 当 疝 未 下 载 文 件 时 ， 
只 显示 一 个 下 载 按钮 <button>， 对 应 的 目 定义 图 数 是 download0; 当 已 经 下 载 成 功 时 ， 隐 喊 
下 载 按钮 ， 显 示 图 片 组 件 <image> 和 重 首 按钮 <button>， 分 别 用 于 显示 所 下 载 的 图 片 和 返回 未 

在 图 5-7 中 ， 图 (a) 为 页 和 面 初 始 效 果 ， 此 时 尚未 下 载 文 件 ; (b) 十 文件 下 载 成 功 后 
的 效果 ， 此 时 所 下 载 的 图 厂 将 显示 在 页 务 上 ， 用 户 还 可 以 蛙 击 “和 苗 置 ” 扫 钮 返回 页 面 初始 状 
态 ; 图 (c) 是 文件 下 载 过 程 中 Console 控制 台 的 输出 内 容 ， 广 内容 是 由 downloadTask 对 象 
的 监听 事件 onProgressUpdate 实现 的 ， 由 该 图 可 见 输出 语句 一 共 显 示 了 两 次 ， 第 一 次 是 下 载 
过 程 〈《 下 载 进 度 为 16%) 中 、 第 二 次 是 下 载 完 毕 〈 下 载 进度 为 100%) 时 。 显 示 次 数 与 文件 
大 小 和 网 速 有 天， 不 同 设 备 、 文 件 和 网 络 坏 境 可 能 和 存在 大 天。 


本 章 主 要 内 容 是 小 程序 媒体 API 的 用 法 ， 包 括 图 片 、 录 音 、 音 频 、 视 频 和 相机 管理 。 


掌握 图 片 的 选择 、 预 览 、 信 息 获取 和 保存 的 方法 ; 
掌握 录音 管理 器 的 用 法 ; 
掌握 背景 音频 管理 和 音频 组 件 控制 的 方法 ; 


学 握 视 频 的 选择 、 保 存 和 组 件 控 制 的 方法 ; 
掌握 相机 管理 器 的 用 法 ， 


6.1.1 选择 图 片 


小 程序 使 用 wx-chooseImage(OBJECT) 从 本 地 相册 中 选择 图 片 或 使 用 相机 拍照 获得 图 片 ， 


图 片 将 被 存放 在 设备 的 临时 路 径 ， 在 小 程序 本 次 局 动 期 间 可 以 正 第 使 用 。 


OBJECT 参数 的 说 明 如 表 6-1 所 示 。 


表 6-1 wx.chooselmage(OBJECT) 的 参数 


全 六 说 二 


Ce 最 多 可 以 还 择 的 图 片 汪 数 ， 莱 认为 5 
sizeType ”StringAmray | 否 | original 为 原 图 ，compressed 为 压缩 图 默认 二 者 都 有 
sourceType ”StringAmray | 否 album 为 从 相册 选 图 ，camera 为 使 用 相机 ， 默 认 二 者 都 有 


success() Function | 是 右 成 功 则 返 片 的 本 地 文件 路 径 列 表 tempFilePaths 


fail0 ”Function | 否 | 接口 调用 失败 的 回调 函数 


complete( Function | 否 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


success( 〇 返回 参数 的 说 明 如 下 。 

。 tempFilePaths: StringArray 关 型 ， 表 示 图 片 的 本 地 文件 路 径 列 表 。 

。 tempFiles: ObjectArray 类 型 ， 表 示 图 片 的 本 地 文件 列表 ， 每 项 是 一 个 File 对 象 ， 从 版 
本 1.2.0 开始 文 持 。 

File 对 象 结构 的 说 明 如 下 。 

。 path: String 类 型 ， 表 示 本 地 文件 路 径 。 

。 size: Number 类型， 表示 本 地 文件 大 小 ， 单 位 为 了 B。 

需要 注意 的 是 ，wx.chooseImage0 〇 获得 的 图 片 仅 能 在 小 程序 局 动 期 间 临 时 使 用 ,如 和 需 持 久 
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保存 ， 需 要 主动 调用 wx-saveFileO 进 行 傈 仔 ， 这 样 在 小 程序 下 座 司 动 时 才能 访问 得 到 。 
小 程序 使 用 wx.previewImage(OBJECT) 预 大 图 片 ，OBJECT 参数 的 说 明 如 表 6-2 所 示 。 


表 6-2 wx.previewlImage(OBJECT) 的 参数 


参数 说 明 

curent 当前 显示 图 片 的 链接 ， 如 果 不 填 则 默认 为 uls 的 第 一 张 
urls 需要 预览 的 图 片 链接 列表 

success() 接口 调用 成 功 的 回调 函数 

Bil) 接口 调用 失败 的 回调 函数 


completeO 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


6.1.3 获取 图 片 信息 


小 程序 使 用 wx.getImageInfo(OBJECT) 获 取 图 片 信息 ,OBJECT 参数 的 说 明 如 表 6-3 所 示 。 


0 


Pi 


表 6-3 wx.getlImagelnfo(OBJECT) 的 参数 
参数 说 明 
到 图 片 的 路 径 ， 可 以 是 相对 路 径 、 临 时 文件 路 径 、 存 储 文件 路 径 、 网 
络 图 片 路 任 
success() 接口 调用 成 功 的 回调 函数 
fail() 接口 调用 失败 的 回调 函数 


completeO 接口 调用 结束 的 回调 函数 (调用 成 功 与 吾 者 执行》 


success() 返 回 参 数 的 说 明 如 表 6-4 所 示 。 


表 6-4 success() 返 回 参 数 
参数 低 版 本 
width 
height 图 片 高 度 ， 单 位 为 px 
path 返回 图 片 的 本 地 路 径 
orlentation 返回 图 片 的 方 癌 1.9.90 
type 返回 图 片 的 格式 1.9.90 


orientation 参数 的 说 明 如 表 6-5 所 示 。 


表 6-5 orientation 参数 


枚 举 值 说 明 
默认 
down 180” 旋 转 
left 逆 时 针 旋 转 90” 
right 顺 时 针 旋 转 90° 
up-mirrored 同 up， 但 水 平 翻转 
down-mirrored 同 down， 但 水 平 翻转 
left-mirrored 同 left， 但 竺 十 翻转 


right-mirrored 同 right， 但 竺 直 翻 转 
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6.1.4 ”保存 图 片 
小 程序 使 用 wx.saveImageIoPhotosAlbum(OBJECT) 保 存 图 片 到 系统 相册 ， 需 要 用 户 授 权 
scope.wWriitePhotosAlbum。 访 接口 从 基础 库 1.2.0 开始 广 持 ， 低 版 本 需 做 菩 容 处 理 。 
OBJECT 参数 的 说 明 如 表 6-6 所 示 。 
表 6-6 wx.savelmageToPhotosAlbum(OBJECT) 的 参数 


参 i 说 明 


filepath ee 图 片 文件 路 径 ， 可 以 是 临时 文件 路 径 也 可 以 是 永久 文件 路 径 ,不 
- 支持 网 络 图 片 路 径 


ee 接口 调用 成 功 的 回调 函数 ,返回 String 类 型 参数 errMsg, 表示 调 
success() Function 用 结果 


fail() ”Function ”| 否 ”| 接口 调用 失败 的 回调 函数 


completeO ”Function | 否 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 ) 


【 例 6-1】 媒体 API 图 片 管理 的 简单 应 用 
WXMI (pages/demo01/image/image.wxml)〉 文件 代码 如 下 : 


.<view class='title'>1. 图 片 管理 </view> 


. <View Class='demo—box'> 
<View class='title'>wx.getLocation (OBJECT) </view> 
<button bindtap="chooseImage "> 选择 图 片 </button> 


<image src='{{src}}" mode='widthFix"'></image> 


<button type="primary™” SizZe="'mini" pbindtap"previewImage"> 预 多 图 片 </button> 
<button type="primary™” SiZe="mini'’ bindtap"getImageInfo"> 图 片 信息 </button> 


<button type="primary” Size= "mini" bindtap= saveImage"> 保 存 图 片 </button> 


I 四 靖 


. </view> 


JS (pages/demo0l/image/image.js) 文件 代码 如 下 : 


. Pagel(l{ 
/ /选择 图 片 
chooselImage:function(})l1l 
var that=this 
wxXx.CchooselImage l(t! 
count: 1，// 默 认为 3 
sizeType: ['original'， 'compressed'],// 可 以 指定 是 原 图 还 是 压 见 图 默认 二 者 都 有 
sourceType: ['album'， 'camera']，// 可 以 指定 来 源 是 相册 还 是 相机 ， 默 认 二 者 都 有 


SUCCeSS: function(res) I 


ID 靖 


| 一 
人 


// 返 回 选 定 照片 的 路 径 列 表 ，tempEilePath 可 以 作为 img 标签 的 src 属性 
二 Var tempFilePpaths=res.temprFilePaths 
that.setDatal({ src: tempFilepaths[0|]}) 
13. } 
1 }) 
1>. 上 ， 
T6- /7 预览 图 片 
es previewlmage:function()}t 
18. var that=this 
he wxX.previewImage ({ 
?0 urls: [this.data.srcl|, 
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21. I 

之 j 

wae / /获取 图 片 信息 

4. getImagelInfo: functiont() { 
之 JJ - var that=this 

20. wxXx.getImageInfol(t! 

-1. STC: this.data.src, 

8B. Success:function (res)t 

二 号 WwWX .ShowTIToast (1{ 

30 。 TICom: moneE ， 

le title: "党 :'+res.widtht', 高 :"'+res.height, 
Ee + 

SE } 

34 上 

35 . 上， 

36 . // 保 存 图 片 

汪汪 savelImage: function() { 

二- var that=this 

3 wxXx.SavelmageToPhotosAlbuml(l 
40. filePath: 七 hat .data.src, 
41. success:function(}it 

2 WX.ShowToast(t{ 

J a 
44. }) 

45. } 

46. 有 

4 1/ } 

48. }) 


真 机 预 现 效 末 如 图 6-1 所 示 。 
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1. 图 片 管理 
图 片 管理 的 综合 应 用 图 片 管理 的 综合 应 用 


选择 图 片 


入 微 信 ,是 一 个 生活 方式 


担 照 包 徽 信 小 程序 开发 零 基 础 人 站 


名 微 信 小 程序 开发 零 基础 入 门 从 手机 相册 选择 


取消 
(a) 页 面 初 始 效 采 (b》 单 击 “ 选 择 图 片 ” 殷 和 钮 (c) 图 片 选择 完毕 
图 6-1 图 片 溃 理 的 简单 应 用 


3 微 信 小 程序 开发 零 基 础 入 门 “并 


下 午 9:38 守卫 = 下 午 呈 3 号 


例题 DEMO “+ 例题 DEMO 
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1. 图 片 千 理 1. 图 片 管理 


图 片 管理 的 综合 应 用 图 片 管 理 的 综合 应 用 


选择 图 片 


寅 :1080: 高 :608 
保存 成 功 ! 


多 徽 信 小 程序 开发 堆 基 础 入 门 鸟 微 信 小 程序 开发 零 基础 入 门 


Cd) 预览 图 片 效 果 Ce) 查看 图 片 信息 Cf 保存 图 片 


6-1 〈 续 ) 


【代码 说 明 】 

本 示例 在 image.wxml 中 包含 了 一 个 <button> 普 退 控 钮 用 于 选择 图 片 ， 对 应 的 目 定义 函数 
是 chooseImage0; 还 有 3 个 <button> 迷 你 按钮 分 别 用 于 预 邹 、 查 询 信 息 和 保存 图 厅 ， 对 应 的 
上 定义 六 数 分 别 是 previewlImage()、getImageInfo(O 和 和 saveImage()。 

企图 6-1 中 ， 图 (a) 为 页 面 初 始 效 果 ， 此 时 尚未 选取 图 厂 ，3 个 迷你 按钮 无 效 ; 图 (b) 是 
单 击 “ 选 择 图 片 ” 按 钮 后 的 效果 ， 此 时 下 方 出 现 操 作 沫 半 可 以 从 相册 选择 图 片 或 者 担 照 ; 
图 (c) 是 图 请 选择 完毕 效 末 ; 图 (d) 是 单 击 “ 预 大 图 片 ” 投 钮 后 的 效 采 : 图 (e) 是 里 击 “图 
卢 信 息 ” 按 钮 后 的 效 末 ， 此 时 弹出 销 息 提示 框 拍 述 图 片 的 宽 和 融 : 图 (f) 是 里 击 “人 怀 存 图 请” 
按钮 后 的 效果 ， 此 时 图 厂 已 经 重新 被 保存 到 手机 中 。 


小 程序 使 用 wx.getRecorderManager() 获 取 全 局 唯一 的 录 首 官 理 幽 recorderManager， 议 接 
口 从 基础 库 1.6.0 开始 文 持 ， 低 版 本 需 做 羔 容 处 理 。 
recorderManager 对 象 的 方法 如 表 6-7 所 示 。 


表 6-7 recorderManager 对 象 方 法 


方 法 说 明 
startO _ options 。 ”| 开始 录音 
resume() 继续 录 首 
sop0 |[ 停 目录 间 


onStartO) callback 录音 开始 事件 


onPause() callback 录音 暂 俘 事件 
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续 表 


方 。” 法 说 明 
二 录音 仓 止 事件 ， 返 回 String 类 型 参数 tempFilePath 表示 录音 文件 的 临 
onSstop() callback 时 路 径 


onFrameRecordedO a ey 会 回调 录音 分 片 结果 数据 。 如 果 设 置 了 


onError() callback 录音 错误 事件 ， 返 回 String 类 型 参数 errMsg 表示 错误 信息 


其 中 start(options) 方 法 的 参数 说 明 如 表 6-8 所 示 。 
表 6-8 ”start(options) 方 法 的 参数 说 明 


属 性 支持 的 版 本 


指定 录音 的 时 长 ， 单 位 为 ms， 如 采 传 入 了 合 
法 的 duration， 在 到 达 指 定 的 duration 后 会 日 
动 停止 录音 , 其 最 大 值 为 600000 (10 分 钟 ) ，| 1 
默认 值 为 60000 (1 分 钟 ) 
sampleRate ”Number | 否 | 采样 率 ， 有 效 值 为 8000/16000/44100 1.6.0 
numberOfChannels Number | 否 录音 通道 数 ， 有 效 人 为 1/2 1.6.0 
encodeBitRate 编码 码 率 ， 有 效 值 见 表 6-9 1.6.0 


音频 格式 ， 有 效 值 为 aac/mp3 1.6.0 


om swing | 大 
指定 帧 大 小 ， 单 位 为 KB。 在 传 入 frameSize 
以 后 ， 每 录制 指定 怖 大 小 的 内 容 后 都 会 回调 


ee ee 录制 的 文件 内 容 ， 若 不 指定 则 不 会 回调 。 其 | 
暂时 仅 支持 mp3 格式 
audioSource 指定 音频 得 入 源 ， 扒 认 值 为 auto' 2.1.0 


采样 率 和 公 率 关系 如 表 6-9 所 示 。 
表 6-9 采样 率 和 编码 码 率 关 系 


采 样 率 编码 码 率 
8000 16000 一 48000 
11025 16000 一 48000 
12000 24000 一 64000 
16000 24000 一 56000 
22030 32000 一 128000 
24000 32000 一 128000 
32000 48000 一 192000 
44100 64000 一 320000 
48000 64000 一 320000 


audioSource 的 有 效 值 如 表 6-10 所 示 。 


表 6-10 audioSource 的 有 效 值 
值 支持 的 平台 
auto 目 动 设置 , 默认 使 用 手机 麦克 风 , 插 上 耳麦 后 自动 切换 为 使 用 耳机 和 妥 元 风 
buildInMic iOS 
headsetMic iOS 
mic 麦克 风 〈 没 捅 耳麦 时 是 手机 麦克 风 ， 插 耳麦 时 是 耳机 麦克 风 
camcorder 摄像 头 的 麦克 风 
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onFrameRecorded(callback) 回 调 结 果 说 明 如 表 6-11 所 示 。 


表 6-11 onFrameRecorded() 回 调 结 果 


属 性 | 类 型 说 明 
frameBuffer ”AmayBuffer 录 首 分 片 结果 数据 


isLastFrame 当前 帧 是 否 正常 录音 结束 前 的 最 后 一 由 


【 例 6-2】 媒体 API 录音 管理 的 简单 应 用 
WXML (pages/demo02/recorderTrecorderwxml) 文件 代码 如 下 : 
党 


1. <view class='title'>2 .录音 管理 < /view> 


2. <View Class='demo—box'> 


3. <View Class='title'»3 录 首 管 理 器 </view> 


视频 讲解 


4 。 <button type="primary” size="mini pbindtap-"start"> 开 始 录 音 </button> 
号 <button type=" "primary” SizZe= mLIDnIL pbindtap"stop"> 停 止 隶 首 </button> 


6. </view> 


JS (pages/demo02/recorder/recorder.js) 文件 代码 如 下 : 


1. Page(l{ 

2. // 开 始 录 音 

3 start:function(}t 

4. COnNnst options={ 

人 duration: LO000 ， 

6. sampleRate: 44100, 
Re numberofchannels: 1., 
8. encodeBitRate: 192000 ， 
> format: aac', 

10. framesSize: oo0 

| } 

有 this.rm.start (options) 
13. 上 


14. V/ 停 止 录 音 
15. Stop:ftunction() { 
1 6 - this.rm.stopt() 


li 1, 

18. onLoad: function{(options} { 

I this.rmwx.getRecorderManager () 
a this.rm.onstopl( (res}=>1 

2 / /播放 录 首 内 容 

过 二 Const audioCtx~=~wx.createInnerAudioContext () 
a audiliocCtx.src~=res.tempFilePath 
24. audioctx.play l()} 

22. 1) 

26. } 

11) 


运行 效 来 如 图 6-2 所 示 。 
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录音 管理 器 


驯 微 信 小 程序 开 点 零 基 础 入 门 


录音 管理 器 


避 微 信 小 程序 开发 零 基础 入 门 


“代码 小 实验 ”要 使 用 你 的 录 盏 功能 ， 


是 天 多 证 ? 


取消 确定 


(a) 单 击 “ 开 始 录音 ”按钮 (b) 录音 过 程 
6-2 ”录音 党 理 的 简单 应 用 


【代码 说 明了】 

本 示例 在 recorderwxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 开始 和 停止 录 首 ， 对 应 的 目 
定义 阔 数 分 别 是 start0 和 stop0O; 在 recorderjs 的 onLoadO 中 生成 录 首 官 理 涡 recorderManager， 
并 监听 onStopO 国 数 获 取 录 音 完 毕 后 音频 的 临时 路 径 地 址 ， 然 后 进行 播放 。 

在 图 6-2 中 , 图 (a) 为 首次 录音 效 末 ,此 时 需要 手动 授权 人 允许 用 己 使 用 录音 功能 ; 图 (b) 
是 录 首 过 程 ， 此 时 右上 和 角 会 出 现 办 烁 的 话 人 简 图 标 ; (c) 是 停止 录音 后 的 状态 ， 此 时 话 人 简 图 
标 消 失 并 且 目 动 播放 刚才 的 录音 内 容 。 


音频 根据 播放 性 质 可 以 分 为 背景 音频 和 前 台 音 频 。 有 月 景 音频 在 小 程序 最 小 化 之 后 还 可 以 
继续 在 后 台 播 放 。 


6.3.1 背景 音频 管理 
小 程序 使 用 wx.getBackgroundAudioManager0 〇 获取 全 局 唯一 的 背景 首 频 官 理 疾 


backgroundAudioManager。 访 接口 从 基础 库 1.2.0 开始 文 持 ， 低 版 本 需 做 兼容 处 理 。 
backsgroundAudioManager 对 象 的 属性 说 明 如 表 6-12 所 示 。 


表 6-12 backgroundAudioManager 对 象 属性 
属 性 最 低 版 本 
当前 音频 的 长 度 〈 单 位 为 sS) ， 只 在 当前 有 合法 的 src 
duration Number 证 下 
时 返回 
是 


有 当前 音频 的 播放 位 置 (单位 为 s) ， 只 在 当前 有 合法 的 
cUITentTIme Number pi 
srIC 时 返回 


a Wm 当前 是 否 为 暂停 或 停止 状态 ，true 表示 暂停 或 停止 ， 
下 false 表示 正在 播放 


Ti 微 信 小 程序 开发 零 基础 入 门 


音频 的 数据 源 ， 默 认为 空 字符 串 ， 当 设置 了 新 的 src 
a String 时 会 自动 开始 播放 ， 目 前 支持 的 格式 有 m4a、aac、 
startTime 
/ 音频 缓冲 的 时 间 点 ， 仅 保证 当前 播放 时 间 点 到 此 时 间 
点 内 容 已 缓冲 
音频 标题 ， 用 于 做 原生 音频 播放 器 的 音频 标题 ， 原 生 
和 String 音频 播放 器 中 的 分 享 功能 分 享 出 去 的 卡片 标题 也 将 使 
用 该 值 
专辑 名 ， 原 生 音 频 播 放 器 中 的 分 享 功能 分 享 出 去 的 卡 
ee 片 简介 也 将 使 用 该 什 
0 es 歌手 名 ， 原 生 音频 播放 器 中 的 分 享 功能 分 享 出 去 的 卡 
片 简 介 也 将 使 用 该 值 
封面 图 url， 用 于 做 原生 音频 播放 器 的 背景 图 ， 原 生 音 
coVveIImgUTl String 频 播 放 器 中 的 分 至 功能 分 至 出 去 的 卡片 配 图 及 背景 也 
将 使 用 该 图 
页 面 链 接 ， 原 生 音 频 播放 器 中 的 分 享 功能 分 享 出 去 的 
WP 卡片 简介 也 将 使 用 该 值 
ed String 首 频 协议 ， 默认 值 为 http'， 设置 为 hls' 则 可 以 支持 播放 


HLS 协议 的 直播 首 频 


backgeroundAudioManager 对 象 的 方法 说 明 如 表 6-13 所 示 。 


表 6-13 _ backgroundAudioManager 对 象 方法 


方 法 说 明 
playO ”| 播放 
pause0 | 暂停 
stop() 本 集 止 
seek() 跳 转 到 指定 位 置 ， 单 位 为 s 
et 背景 音频 进入 可 以 播放 状态 ， 但 不 保证 后 面 可 以 流畅 播放 
onPlay() 背景 普 频 播放 事件 
onPause() 背景 音频 暂 俘 事件 
onSstop() 背景 普 频 信 止 事件 
wii 背景 音频 自然 播放 结束 事件 
ee 背景 音频 播放 进度 更 新 事件 
onPrev() 用 户 在 系统 音乐 播放 面板 单 击 上 一 曲 事件 〈iOS only) 
onNextO) 用 户 在 系统 音乐 播放 面板 单 击 下 一 曲 事 件 (iOS only) 
onError() 背景 首 频 播放 错误 事件 ， 返 回 errCode 
pt 音频 加 载 中 事件 ， 当 音频 因为 数据 不 足 需 要 停 下 来 加 载 时 会 触发 
errCode 的 说 明 如 下 。 


e。 10001: 系统 错误 。 
e 10002: 网络 销 误 。 
e 10003: 文件 铺 误 。 
。 10004: 格式 错误 。 
e -1]: 未 知 铬 误 。 

【 例 6-3】 媒体 API 背景 音频 管理 的 简单 应 用 视频 讲解 
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WXML (pages/demo03bsgAudiombgAudio.wxml) 文件 代码 如 下 : 


1. <view class='title">3- 音 频 管 理 </wiew> 

2. <Vview Cass= demo 一 DOXx > 

3. <view class='title> 朋 景 音 频 管 理 </view> 

4. <button type=" "primary” SiZe="mini’ bindtap 一 "play"> 播 放 < /button> 
he <button type="primary” Size= "mini’ pindtap="pause"™> 区 储 </button> 


6. </view> 


JS (pages/demo03/bgAudio/bgAudio.js) 文件 代码 如 下 : 


1. Page ll 

2. // 初 始 化 育 景 普 频 

本 initialAudio:function()l{ 

4. let bgAudioManager=this.bgAudioManager 

5 bgAudioManager .title=' 此 时 此 刻 " 

6 - bgAudioManager .epname=' 此 时 此 刻 " 

Eas bgAudioManager .singer=' 许 揪 ' 

Be bgAudioManager.coverImgUril='http://y.gtimg.cn/msic/photo new/T002R300 


X300MOOOOO03rsKF44GyaSk .JPpg" 

二 bgAudioManager.src='http://ws.stream.gqqmusic.gqq.com/MS5OO0001VfvsJ21xF 
qb.mm32quid=ffffffff82def4af4bl2b3cd933/doe /lguin=34689 220&vkey~—=6292F 
DIE1IE38AE061FFO2C31F /16658ESC81FS5594DI61F2E88B854E81CAAB i806D5EA4F103 
E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'// 设 置 了 src 之 后 会 自动 播放 

10. 上 

11. // 开 始 播 放 

1l2. play: function()} | 

| SS this.bgAudioManager.playl() 

14- 上 

15. // 和 暂停 播放 


16. pause: tnction() 1 


de this.bgAudioManager -pause ( ) 

18. 1, 

19. onLoad: function(options} { 

20. this.bgAudioManager=wx .getBackgroundAudioManager() 
a this.initialAudiortl) 

We 

2 


运行 效果 如 图 6-3 所 示 。 

【代码 说 明 】 

本 示例 在 bgAudio.wxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 播放 和 和 暂 修 背景 首 和 所 , 对 应 
的 目 定 义 函 数 分 别 是 PlayO0 和 pause0; 在 bgAudio.js 的 onLoad0 函 数 中 生成 痛 景 首 频 官 理 疾 
bgAudioManager， 并 调用 日 定义 函数 initialAudio() 来 初始 化 首 频 播放 。 

在 图 6-3 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 首 频 已 经 目 动 播放 ， 用 户 可 单 击 按 钮 切换 播 
放 / 暂 仿效 果 ; 图 (b) 为 真 机 测试 效果 ， 妆 小 程 订 被 天 财 进入 后 台 时 仍然 可 以 继续 播放 背景 
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背景 音频 管理 
E33 ES 


避 微 信 小 程序 开发 零 基础 入 | 门 


物 H iPhone 
= 此 时 此 刻 
i 许 针 一 此 时 此 刻 


有 蝎 早 的 通知 


(a) 页 面 初始 效果 (b) 小 程序 进入 后 台 
图 6-3 ”背景 音频 管理 的 简单 应 用 


6.3.2 ”音频 组 件 控 制 


小 程序 使 用 wx:createInnerAudioContextO 创建 并 返回 内 部 audio 上 下文 对 象 


innerAudioContext， 谤 接口 从 基础 库 1.6.0 开始 支持 ， 低 版 本 二 做 兼容 处 理 。 
innerAudioContext 对 象 的 属性 说 明 如 表 6-14 所 示 。 


表 6-14 innerAudioContext 对 象 属性 


属性 说 明 


STC 音频 的 数据 链接 ， 用 于 直接 播放 
startTime 开始 播放 的 位 置 (单位 为 s) ， 默 认为 0 
autoplay 和 是否 目 动 开 始 播放 ， 默 认为 false 


loop 是 否 循环 播放 ， 默 认为 false 


是 否 齐 循 系统 静音 开关 , 当 此 参数 为 false 时 ， 
obeyMuteSwitch Boolean | 即使 用 户 打 开 了 前 首 开关 ， 也 能 继续 发 出 声 


当前 音频 的 长 度 (单位 为 s) ， 只 在 当前 有 合 
当前 音频 的 播放 位 置 (单位 为 s) ， 只 在 当前 
currentTime Number 有 合法 的 src 时 返回 ， 时 间 不 取 整 ， 保 留 小 
数 点 后 6 位 
当前 是 否 为 暂停 或 停止 状态 ，true 表示 和 暂停 
下 或 停止 ，false 表示 正在 播放 


音频 缓 神 的 时 间 点 ， 仅 你 证 当前 播放 时 间 损 
到 此 时 间 点 内 容 己 缓冲 


volume 音量 ， 范 围 为 0 一 1 


buffered Number 


ei 


innerAudioContext 对 象 的 方法 说 明 如 表 6-15 所 示 。 


最 低 版 本 


1.9.90 
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表 6-15 innerAudioContext 对 象 方法 


方法 最 低 版 本 
play0 简 
stop0 上 
seekO 跳 转 到 指定 位 置 ， 单 位 为 s 
destroy() 销毁 当前 实例 
onCanplayO 音频 进入 可 以 播放 状态 ， 但 不 保证 后 面 可 以 流畅 播放 
onPlay() 音频 播放 事件 
onPause() 首 频 暂停 事件 
onSstop() 音频 俘 止 事件 
onEnded0) 音频 自然 播放 结束 事件 
onTimeUpdate() 音频 播放 进度 更 新 事件 
onError() 首 频 播放 错误 事件 
onWaiting0 首 频 加 载 中 事件 ， 当 音 频 因为 数据 不 足 ， 需 要 俘 下 来 

加 载 时 会 触发 
onSeekimngO 音频 进行 seek 操作 事件 
onSeeked0) 音频 完成 seek 操作 事件 
offtCanplay0 取消 监听 onCanplay 事件 1.9.0 
offplayO 取消 监听 onPlay 事件 1.9.0 
offPause() 取消 监听 onPause 事件 1.9.0 
offstop0 取消 监听 onStop 事件 1.9.0 
offEnded0) 取消 监听 onEnded 事件 1.9.0 
offTimeUpdate() 取消 监听 onTimeUpdate 事件 1.9.0 
offError() 取消 监听 onError 事件 ， 并 返回 errCode 1.9.0 
offwaitingO 取消 监听 onWaiting 事件 1.9.0 
offseekingO 取消 监听 onSeeking 事件 1.9.0 
offSeekedO 取消 监听 onSeeked 事件 1.9.0 


说 明 : errCode 的 说 明 与 6.3.1 中 backgroundAudioManager 对 象 的 相同 。 
【 例 6-4】 媒体 API 音频 组 件 控制 的 简单 应 用 
WXML (pages/demo03/audioCtx/audioCtx.wxml)〉 文件 代码 如 下 : 


.<View class='title'>3. 音 频 管 理 < /view> 

- <VIieEw CasSss= demo— box'> 

<view class='title'> 首 频 组 件 控制 </view> 
<button type="primarvy" size="mini” bindtap="plav"> 上 捕 记 </button> 
<button type=" "primary™” SizZe= "mini' bindtap="stop"> 停 止 </button> 
<button type=" "primary” SiZzZe="mini’ bindtap="pause"> 芹 仿 </buttons 


-mi 


. </view> 


JS (pages/demo03/audioCtx/audioCtx.js〉 文 件 代 码 如 下 : 


1. Page 1L 

2. // 初 始 化 音频 

EE initialAudio:function()}t1 

4. let audioCtx=this.audioCtx 

Ss audioctx-autoplLav=-true // 人 允许 目 动 播放 

6. audioCtx.src='http://ws.stream.gqqmusic.gqq.com/M500001VfvsJ21xFqb .mp3? 


下 7 微 信 小 程序 开发 零 基础 入 门 


guid=ffffffff82def4af4bl2b3cd9331doe suUlIn=3d4689 1220gvkey~=6292F21E1E 
384E061FFO2C31F /16658E2C81FI35394D561F2E88B8D24E81CAAB /806D5E4F103E22D 
33Cl16F3FACI06DI1IABL /2DE8600B3 /E43FAD&fromtag=46" 


a 

Sa 

2 

10. 
Te 
1 一- 
3 
14. 
I 
16-. 
Ls 
18. 
1 
20 - 
a 
过 
es 
4. 
i 
-a 
ee 
8- 
Es 
30 - 
汪 业 
了 


3351) 


audioCtx.onPlay( ()=>1 
console.1log{(' 开 始 播 放 ') 
}) 
audioCtx.onPause( (res)=>! 
console.1log(' 芹 停 播放 ') 
}) 
audiocCtx.onSsStop( (res})=>1{ 
console.1log(' 售 止 播 放 ") 
}) 
上 
/ /开始 播放 
play:function(}t 
this.audiocCctx.playl() 
上 
/ /暂停 播放 
pause: function() 1 
this.audioCtx.pause () 
}, 
/ /停止 播 放 
stop: function(}t 
this.audiocCctx.stop() 
}, 
onLoad: functionl(options) { 
this.audiocCctx~wx.createInnerAudioContext () 
this.initialAudio() 


} 


运行 效果 如 图 6-4 所 示 。 


工业 二 ji 本 二 1d:d3 
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音频 组 件 控制 


名 微 信 小 程序 开发 零 基 础 入 门 


Console Sources Network 


全 | top Vv | Filter 


开始 播放 
暂停 播放 
开始 播放 


停止 播放 


(a) 页 面 初始 效果 Cb》 Console 控制 台 输 出 内 : 


6-4 ”音频 组 件 控制 的 简 音 应 用 


>ecurlty 


Audits 


storage 


AppData 


De 
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【代码 说 明 】 

本 示例 在 audioCtx.wxml 中 包含 了 3 个 <button> 按 钮 分 别 用 于 播放 、 仿 止 和 羞 仿 普 频 ,对 
应 的 目 定 义 函 数 分 别 是 playO stopO0 和 pause0; 在 audioCtx.js 的 onLoadO 函 数 中 生成 audioCtx 
上 下 文 对 象 ， 并 调用 自 定义 函数 initialAudio0 初 始 化 音频 播放 。 

在 图 6-4 中 ， (a) 为 页 面 初始 效果 ， 此 时 首 频 会 自动 播放 ; 图 (b) 是 单 击 不 同 按钮 
后 Console 控制 台 的 输出 内 容 ， 由 该 图 可 见 首 频 的 播放 、 暂 停 和 停止 事件 部 可 以 被 监听 到 。 


6.4.1 选择 视频 


小 程序 使 用 wx.chooseVideo(OBJECT) 拍 摄 视 频 或 从 手机 相册 中 选 视频 , 返回 视频 的 临时 
文件 路 和 任 。OBJECT 参数 的 说 明 如 表 6-16 所 示 。 


表 6-16 wx.chooseVideo(OBJECT) 的 参数 


参数 最 低 版 本 


. album 指 从 相册 选 视频 ， era 指使 用 相机 拍摄 ， 协 


compressed 是 否 压 缩 所 选 的 视频 源 文件 , 默认 值 为 rue, 需要 压缩 | ”1.6.0 
maxDuration 拍摄 视频 的 最 长 拍摄 时 间 ， 单 位 为 秒 ， 最 长 支持 60s 

success() 接口 调用 成 功 ， 返 回 视频 文件 的 临时 文件 路 径 

failO 接口 调用 失败 的 回调 函数 


completeO) 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 》 


success0O 返 回 参数 的 说 明 如 下 。 

® tempFilePath: 选 定 视频 的 临时 文件 路 径 。 

e duration: 选 定 视频 的 时 间 长 度 。 

e size: 选 定 视频 的 数据 量 大 小 。 

。 height: 返回 选 定 视频 的 长 。 

e Width: 返回 选 定 视频 的 宽 。 

需要 注意 是 ，wx.chooseVideo0 获 得 的 视频 仅 能 在 小 程序 局 动 期 间 临 时 使 用 ， 如 需 持 久保 
仔 ， 和 需要 主动 调用 wx.saveFile0 进 行 保 存 ， 这 样 在 小 程序 下 次 局 动 时 才能 访问 得 到 。 


6.4.2 ”保存 视频 


小 程序 使 用 wx.saveVideoToPhotosAlbum(OBJECT) 保 存 视 频 到 系统 相册 ， 需 要 用 户 授权 
scope.writePhotosAlbum。 访 接口 从 基础 库 1.2.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。 
OBJECT 参数 的 说 明 如 表 6-17 所 示 。 


表 6-17 ”wx.saveVideoToPhotosAlbum(OBJECT) 的 参数 
参数 说 _ 明 
filePath 视频 文件 路 径 ， 可 以 是 临时 文件 路 径 或 永久 文件 路 径 
success() 接口 调用 成 功 的 回调 函数 ， 返 回 String 类 型 的 参数 errMsg， 表 示 调 用 结 来 
fail| 接口 调用 失败 的 回调 函数 
completeO 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 ) 


一 微 信 小 程序 开发 零 基 础 入 门 


6.4.3 ”视频 组 件 控 制 


小 程序 使 用 wx.createVideoContext(videoId .this) 创 建 并 返回 视频 上 和 下文 对 象 videoContext。 


videoContext 通过 videolId 和 一 个 video 组 件 绑 定 ， 通 过 和 它 可 以 操作 一 个 video 组 件 。 
在 自 定义 组 件 下 ， 第 二 个 参数 传 和 组 件 实例 this， 以 操作 组 件 内 的 <video> 组 件 。 
VideoContext 对 象 的 方法 说 明 如 表 6-18 所 示 。 


表 6-18 videoContext 对 象 方 法 


方法 最 低 版 本 
play0 
pause0 


seek() 跳 转 到 指定 位 置 ， 单 位 为 s 
sendDanmu() 发 送 弹 幕 ，danmu 包含 两 个 属性 ， 即 text 和 color 


playbackRate() rate 设置 倍速 播放 ， 支 持 的 倍率 有 0.5、0.8、1.0、1.25、1.5 1.4.0 
进入 全 屏 , 可 传 入 {direction} 参 数 (从 1.7.0 版 本 起 支持 )， 
评 见 video 组 件 


exitFullscreen0 14.0 


【 例 6-$】 姓 体 API 视频 管理 的 综合 应 用 
WXMIL (pages/demo04/videoCtx/videoCtx.wxml)〉 文件 代码 如 下 : 


requestFullScreen() 无 


.<View class='title'>4. 视 频 管 理 < /view> 

. <View Cass= Qemo 一 boxX > 

<view class='title'> 视 频 管 理 综合 应 用 </view> 
<button bindtap="chooseVideo"> 选 择 视频 </button> 


中 


<button type=" "primary” SizZe= "mini’ pindtap"play"> 播 放 </button> 
<button type=" "primary™” SizZe="'mini' bindtap="pausenr> 暂 停 </Putton> 


<1input placeholder=' 请 在 此 人 处 填写 弹 幕 内 容 ' bindblur="bindIinputBlur™ /> 
0. <button type="'primary" pbindtap="bindsendDanmu"> 发 送 弹 各 </button> 
1 .</view> 


下 
| OE ee | 


WXSS (pages/demo04/videoCtx/videoCtx.wxss) 文件 代码 如 下 : 


- input 1 

border: lrpx solid lightblue; 
height: S90rpaxs 

margin: lO0rpx; 


} 


nn 


JS (Pages/demo04/videoCtg/videoCtx.js) 文件 代码 如 下 : 


// 生 成 随机 颜色 
function getRandomColor()} { 
Jlet rgb=|[|] 
Tor let 3=07 TL 3r ETL) 
let color=Math.floor (Math.random(})} * 256) .toString(l16) 
coOlLor=color.1length==l1 2 "0" + color : color 
rgb.push (color) 
} 


return '#" + rgb.join("'') 


下] 


0.1} 


<video id="myVideo"™ src="{{src}}" enable-danmu danmu-btn controls></video> 


<button type=" "primary™” SizZe= "mini' bindtap="saveVideo"> 保 存 视频 </button> 
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| 

12.Page (1 

13. // 选 择 视频 

14. chooseVideo: function(} 1{ 

ee var that=this 

16. WX.ChooseVideo ({ 

下 天 5 SourceType: [ "alpum ， CameTra | ， 
18-. maxDuration: 60, 

I Camera: "back', 

20 - SUCCeSS: function(res) I 
ed that.setData l(t 

ee Src: IrIes.tempFilePath 
en }) 

24. | 

2 }) 

26. 上 

27. // 开 始 播放 

-a. plav: functionl(y 1 

pe this.videoContext .play '() 
30. 上 

31. // 暂 停 播 放 

32. Pause: tunction() { 

汪 本 二 this.videoContext -Pause () 
34. }, 

35. // 保 存 视 频 

36- SaveVvideo: functiont(}) 1 

EE var src~this.data.src 

38. WX. SaveVideoToPhotosAlbuml(t{ 
3 filePath: src, 

40. SUCCeSS: function(res)} 1 
J 国 四 WX.ShowToast (ft 

a title: "保存 成 功 ! '， 
三 }) 

44. } 

42 - }) 

46. }, 

47. inputValue: ，"，// 弹 大 文本 内 容 
48. // 更 新 弹 幕 文本 

49. bindinputBlur: functiont(e) 1 
J0. this.inputValue=e.detalil .value 
D1. 上 

52. // 发 送 弹 幕 

53. bindSsSendDanmu: function() 1 
54. this.videoContext.sendDanmu({ 
3 text: this.inputValue, 

J . Color: getRandomColor'() 
i }) 

38. 上 

J9. onLoad: function(options) { 
60. this.videoContext=wXx.createVideoContext (myVideo") 
la 

2 - 上 ) 


运行 效果 如 图 6-5 所 示 。 
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下 午 9:15 
例题 DEMO 
第 6 章 始 体 API 
4. 视频 管理 


视频 管理 综合 应 用 


选择 视频 


拍摄 人 
青 在 此 处 填写 弹 幕 内 容 


从 手机 相册 选择 


包 微 信 小 程序 开发 零 基 础 入 站 
(a) 围 击 “选择 视频 ” 按 饰 (by 选择 视频 完毕 


下 午 9:16 节 了 上 岂 88% E 下 午 9:17 
例题 DEMO “we 例题 DEMO 
第 6 章 媒体 API 第 6 章 媒体 API 
4. 视频 管理 4 . 视频 管理 


视频 悍 理 综合 应 用 


选择 视频 选择 视频 


保存 成 功 ! 


你 好 你 好 你 好 你 好 


名 微 信 小 程序 开发 堆 基 础 入 门 他 微 信 小 程序 开发 零 基础 六 门 
(ec) 发 送 弹 幕 效果 (d) 保存 视频 成 功 


图 6-5 ”视频 官 理 的 绪 合 应 用 


【代码 说 明 】 

本 示例 videoCtx.wxml 中 包含 了 3 组 内 容 ， 即 <button> 按 钮 和 <video> 组 件 分 别 用 于 选择 
视频 和 旺 示 和 视频， 按钮 对 应 的 目 定 义 图 数 是 chooseVideo0; 3 个 <button> 迷 你 按钮 分 别 用 于 
播放 、 暂 候 和 保存 视频 ， 对 应 的 目 定义 函数 分 别 古 PlayO0、Ppause0 和 saveVideo0; <input> 输 
入 和 框 和 <button> 近 钮 分 别 用 于 输入 弹 关 文本 和 及 送 弹 顺 ， 对 应 的 目 定 义 图 数 分 别 是 
bindImputBlur0 和 bindSendDanmu0 。 在 videoCtx.js 的 onLoadO 图 数 中 创建 视频 对 象 
videoContext 用 于 视频 的 播放 和 暂停 控制 |。 
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在 图 6-5 中 ， 图 (a) 为 早 击 “选择 视频 ”按钮 后 的 效 末 ， 此 时 可 以 现场 拍摄 或 选择 相册 
中 的 视频 ;， 图 (b) 是 视频 选择 完毕 后 的 效 末 ， 此 时 预 贞 图 会 出 现在 视频 区 域 ， 并 县 示 时 长 ; 
(ce) 是 单 击 “ 发 送 弹 幕 ” 按 钮 后 的 效果 ， 此 时 可 以 发 送 随机 颜色 的 多 条 弹 幕 记录 : 图 (d) 
是 日 击 “ 保 存 视频 ”按钮 后 的 效果 ， 此 时 视频 已 经 重新 被 保存 到 手机 中 。 


小 程序 可 以 使 用 wx:createCameraContext(this) 创建 并 返 camera 上 和 下 文 对 象 
cameraContext， 该 对 象 将 与 页 面 中 的 <camera> 组 件 绑 定 ， 通 过 和 它 可 以 操作 对 应 的 <camera> 组 件 。 
其 语法 格式 如 下 : 


Const ctx=~=wx.createCameraContext () 


注意 : 一 个 页 面 只 能 有 一 个 <camera> 组 件 。 在 自 定义 组 件 下 ， 参 数 传 入 组 件 实例 this， 
以 操作 组 件 内 的 <camera> 组 件 。 


cameraContext 对 象 的 方法 如 表 6-19 所 示 。 
表 6-19 cameraContext 对 象 方法 
方 。 法 和 说 。 明 
takePhoto0 拍照 ， 可 指定 质量 ， 成 功 则 返回 图 片 


startRecord0 开始 录像 
stopRecord0 结束 录像 ， 成 功 则 返回 封面 与 视频 


takePhoto0 的 OBJECT 参数 如 表 6-20 所 示 。 


表 6-20 takePhoto() 方 法 的 OBJECT 参数 


参 数 | 类 型 | 必须 说 明 


quality 成 像 质 量 ， 值 为 high、normal、low， 默 认为 normal 


success() Function | 否 | 接口 调用 成 功 的 回调 函数 ，res={ tempImagePath } 


接口 调用 失败 的 回调 函数 


串 | 党 


下 


sai0 | moto 
|| 接口 调用 结束 的 回调 函数 调用 成 功 与 否 都 执行 ) 


startRecordO 〇 OBJECT 参数 如 表 6-21 所 示 。 
表 21 OBJECT 参数 
参数 说 。 明 
success() ee 接口 调用 成 功 的 回调 函数 
il0 Function ”| 。 否 | 接口 调用 失败 的 回调 函数 


complete() Function 是、 名 汉 . 当 人 eS 右上 束 的 回调 函数 (调用 成 功 与 宪 部 执行 ) 


过 30s 或 页面 onHide 时 会 结束 录像 ，res={ temp 
timeoutCallback() Function 中 
ThumbPath. tempVideoPath } 


stopRecord0O 的 OBJECT 参数 如 表 6-22 所 示 。 
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表 6-22 stopRecord() 方 法 的 OBJECT 参数 
参数 说 明 
success() 接口 调用 成 功 的 回调 函数 ，res={ tempThumbPath. tempVideoPath } 
failO 接口 调用 失败 的 回调 函数 
completeO) 接口 调用 结束 的 回调 函数 (调用 成 功 与 吾 者 执行) 
【 例 6-6】 媒体 API 相机 管理 的 简单 应 用 
WXML (pages/demo05/camera/camera.wxml) 文件 代码 如 下 : 


1. <view class='title'>5 .相机 管理 </view> 


2. <VIiIew Class='demo—box'> 
3. <View class='title'3 了 录 斧 功能 应 用 </view> 


视频 讲解 


4 。 <Camera device—position="back"™” flash="off™" style="width: 100%; DelIght : 
300px; "></camera> 

及 <DuUteom wx :if— "(1isRecording}l” LYPe Dinary bimdltap "stopRecord"> 绽 来 
录像 < /button> 

6. <button wx:else type=" Primary bindtap"startRecord"> 开 始 录 像 </button> 

i <video hidden="{{isHidden}}" src='{{src}}"' controls></video> 


8. </viewy> 


JS (pages/demo05/camera/camera.js) 文件 代码 如 下 : 


1. Page (ll{ 

2 data: 

3. 1sRecording: false, 

4. isHidden: true 

2. } ， 

6. // 开 始 录 像 

天 二 startRecord: function() { 

Bs var that=this 

= that.setDatal({ isRecording: true, ijsHidden: true 二) 
10. this.ctx.startRecordt(t 

1 // 超 时 目 动 结束 

人 timeoutCallback (res) I 

L333: that.setDatal(lt 

14. isRecording: false, 

TL SICc: res.tempVideoPath, // 时 新 视频 路 径 地 址 
16. isHidden: false // 显 示 Vvideo 组件 

工 / . }) 

Ta | 

13. }) 

20. 上 


21。 // 停 正 录像 


22. STtopRecord: functiont(} 1 
- var that=this 


24. this.ctx.stopRecordl(t{ 
a SUCCess: function(res)} 1 
?36. that.setDatal(tf 


二 1SsRecording: false, 
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2 src: res.tempVvideopath, // 更 新 视频 路 径 地 址 
2 isHidden: false // 显 示 video 组 件 
30. }) 

31, | 

32 - }) 

33. 1}, 

34. onLoad: function (options) { 

a this.ctx=wxX.createCameraContext () 

306. } 

31-1) 


运行 效果 如 图 6-6 所 示 。 
下 年 8:42 
例题 DEMO 


第 6 章 媒体 APl 
5. 相机 管理 


录像 功能 应 用 


"代码 小 实验 " 要 使 用 你 
的 摄像 头 ， 是 否 人 允许? 


允许 


久 微 信 小 程序 开发 要 基础 入 门 


(a) 页 面 初始 效果 (b) 正在 录像 


例题 DEMO + 例题 DEMO 


00:05 


避 微 信 小 程序 开发 零 基 础 入 门 多 微 信 小 程序 开发 零 基础 入 | 
Cc) 录像 结束 Cd) 播放 临时 视频 文件 


6-6 ”相机 管理 的 简单 应 用 


微 信 小 程序 开发 零 基础 入 门 二 


【代码 说 明 】 

本 示例 在 camera.wxml 中 包含 了 <camera> 和 <video> 组 件 分 别 用 于 显示 相机 和 录制 完毕 
的 视频 ; 男 有 两 个 <button> 按 钮 分 别 用 于 开始 和 结束 录像 ， 这 两 个 按钮 使 用 wx:if 和 wx:else 
属性 确 你 每 次 只 显示 需要 的 那 一 个 ， 它 们 对 应 的 目 定义 函数 分 别 是 startRecord0 和 
stopRecordO0。 在 camerajs 的 data 中 定义 初始 时 隐藏 “结束 录像 ”按钮 和 <video> 组 件 ， 在 
onLoad() 阔 数 中 创建 相机 上 下 文 对 象 ctx 用 于 定理 视频 的 录制 。startRecord0 方 法 触 友 时 显示 
“结束 录像 ”按钮 并 进行 录制 ， 当 录制 超时 30 秒 时 结束 录制 ，stopRecord0 方 法 触发 时 结束 当 
前 的 录制 ， 并 使 用 setData0 方 法 将 录制 完成 的 临时 视频 路 径 地 址 更 新 到 <video> 组 件 的 src 属 
性 中 。 

在 图 6-6 中 ， 图 (a) 为 页 面 初 始 效果 ， 此 时 需要 用 户 授权 访问 摄像 头 ; (b) 是 单 击 
“开始 录像 ”按钮 后 的 效果 ， 此 时 最 多 可 以 录制 30 秒 ; 图 (ce) 是 录像 结束 的 效果 ， 此 时 按钮 
下 方 会 多 出 视频 播放 器 ， 图 (d) 是 播放 临时 视频 的 效果 。 


文件 API 


本 章 主 要 介绍 小 程序 文件 API 的 用 法 ， 包 括 文件 的 保存 、 信 息 获 取 、 本 地 文件 列表 的 获 


取 、 本 地 文件 信息 的 获取 、 删 除 本 地 文件 和 打开 指定 文档 。 
本 草 子 习 目 标 


掌握 保存 临时 文件 的 方法 ; 
掌握 获取 文件 信息 的 方法 ; 
掌握 获取 本 地 文件 列表 的 方法 ; 
掌握 获取 本 地 文件 信息 的 方法 ; 


掌握 删除 本 地 文件 的 方法 ; 
掌握 打开 指定 文档 的 方法 。 


小 程序 使 用 wx.saveFile(OBJECT) 傈 存 文件 到 本 地 。 注 意 ，saveFileO 会 把 临时 文件 移动 ， 


因此 调用 成 功 后 传 入 的 tempFilePath 将 不 可 用 。 其 OBJECT 参数 的 说 明 如 表 7-1 所 示 。 


表 7-1 wx.saveFile(OBJECT) 的 参数 


参 数 | 类 型 | 必 填 _ 说 明 


tempFilePath 需要 保存 的 文件 的 临时 路 径 
success() 返回 文件 的 保存 路 径 ，res={fsavedFilePath: ' 文 件 的 保存 路 径 人 
Big 接口 调用 失败 的 回调 函数 


completeO) 接口 调用 结束 的 回调 函数 《调用 成 功 与 否 都 执行 ) 


【 例 7-1】 文件 API 保存 文件 的 简单 应 用 
WXML (pages/demo/saveFile/saveFile.wxml) 文件 代码 如 下 : 


。 <View Class='title'™»l. 保存 文件 的 简单 应 用 </view> Te = | 9; 
。 <View Class="'demo—box'> 
<view class="title'>(1}) 下 载 交 件 </view> 视频 讲解 


<button type="primary™” bindtap="downloadFile™ > 下 载 文 件 </button> 
<image wx:if="{{src}}" src="'{{src}}" mode="'widthFix"'></image> 


. </view> 
. <View Class='demo—box'> 


<view class='title'>(2) 保 存 文件 </view> 
<button type="primary™ bindtap="saveFile"> 保 存 文 件 </button> 


0 .</view> 


本 7 微 信 小 程序 开发 零 基 础 入 门 “ 克 jy 


1 。 buttont 


1. Page ({ 
Wa data: I 
2 src: !! // 图 片 的 临时 地 址 
E j 
SA 人 
6. downloadFile: function () I 
ie var that=this 
8. wxX.downloadFilel(t 
3 
O084220422097499.Jpg"', 
10. Success: function(res) 1 
业 1f (res.statusCodeQ==—~~200) 
过 that.setDatal(tl 
I STC: res.tempFilePath 
14. }) 
Los } 
16. } 
17. }) 
18. 上 
19. // 保 存 文件 
-0 saveFile: function() I 
a var that=this 
ea let src=this.data:src 
a if (src=="") { 
We: wxXx.ShowToast(t{ 
2 title: ' 请 先 下 载 文 件 ! '， 
26 1icon’: nonNne”" 
ek 1) 
28 } else I 
9 wx.SaveFlilel(l 
30 tempFilePath: src, 
了 下 二 success: functionl(res) I 
2 console.1og(' 文件 被 保存 到 : 
人 WwWX .ShowTITOasSt ({ 
34 title: 保存 威 茂 由 ， 
35 - }) 
36 } 
| 1) 
38 } 
2 
40 -上 ) 


margin: 工 2TPX7 


url: http://img06.tooopen.com/images/20180724/tooopen sl 


开 友 音 工 具 预 宛 效 来 如 图 7-1 所 示 。 


WXSS (pages/demo/saveFile/saveFile.wxss) 文件 代码 如 下 : 


JS (pages/demo/saveFile/saveFile.js) 文件 代码 如 下 : 


{ 


+ res.savedFlilepath) 


文件 API 0 


第 7 章 女 件 API 第 7 章 这 件 API 
1. 保存 文件 的 简单 应 用 1. 保存 立 件 的 简单 应 用 


(下 载 文件 (1) 下 载 文件 
下 载 文件 


(2 保存 文件 


局 微 信 小 程序 开发 零 基础 入 站 


PE 
[2) 保 存 文 件 


par 


局 微 信 小 程序 开发 零 基 础 入 | 


(a) 页 面 初始 效果 (b) 下 载 图 片 文件 Cc) 文件 保存 成 功 


Console Sources Network Security Audits Storage AppData ‘Wxml Sensor Trace 
WV | |Filter Default levels ™ 


”Wed Aug 22 2618 16:53:26 GMT+8888 (中 国标 准时 间 》 配置 中 关闭 合法 域名 、web-view (业务 域名 ) 、TLS 版 本 以 太 HTTPS 证 书 检查 


| A 工具 未 校 验 合法 域名 、web-view 业务 域 名 ) 、TLS 版 本 以 及 HTTPS 证 书 。 
六 件 被 保存 到 : http;:/ /store/wx19879118a6fele8a,06zA]s2XMBe16 U-PqXMDuKV168c.jhhAEgSRmqoms195b36c..，j 


Cd)》 文件 保存 成 功 时 Console (控制 台 ) 的 输出 内 容 
7-1 保存 文件 的 简单 应 用 


【代码 说 明 】 

本 示例 在 saveFile.wxml 中 设置 了 两 个 步骤 , 步骤 1 是 调用 wx.downloadFileO 下 载 图 片 文 
件 , 步骤 2 是 调用 wx.saveFileO 保 存 该 文件 。 每 个 步 又 都 配 有 一 个 <button> 按 钮 触发 相应 的 事 
件 ，tap 事件 对 应 的 目 定 义 国 数 分 别 是 downloadFile0 和 saveFile()。 

在 图 7-1 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 尚未 下 载 文件 :; 图 (b) 是 图 片 文件 下 载 成 
功 后 的 效 末 ， 此 时 所 下 载 的 图 片 将 显示 在 页 面 的 <image> 组 件 中 ; 图 〈c) 是 文件 保存 成 功 的 
消息 提示 :图 (d) 是 文件 保存 成 功 时 Console“〈 控 制 台 ) 的 输出 内 容 。 


小 程序 使 用 wx.getEFileImfo(OBJECT) 获 取 文 件 信息 ， 访 接口 从 基础 库 1.4.0 开始 文 持 ， 低 
版 本 需 做 兼容 处 理 。OBJECT 参数 的 说 明 如 表 7-2 所 示 。 


表 7-2 wx.getFilelnfo(OBJECT) 的 参数 
参数 说 明 
filePath 本 地 文件 路 径 
digestAlgorithm 计算 文件 摘要 的 算法 ， 默 认 值 为 md5， 有 效 值 为 md5、shal 
success() 接口 调用 成 功 的 回调 函数 
fail0 接口 调用 失败 的 回调 函数 


complete() 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 》 


中 ” 微 信 小 程序 开发 零 基础 入 门 


success0 〇 返回 参数 的 说 明 如 表 7-3 所 示 。 


表 7-3 success() 返 回 参 数 


参 数 类 型 说 有明 


size 文件 大 小 ， 单 位 为 也 


digest 按照 传 入 的 digestAlgorithm 计算 得 出 的 文件 摘要 


erMsg 调用 结果 


1. Page l(t{ 

2 data: I 

> tempFilePath: "'" /1/I 临 时 文件 路 径 

4. }, 

5.  // 下 载 文 件 

6. downloadFile: function() 1 

ee var that=this 

8. WwX.downloadFilel(t 

9. url: 'http://localhost/miniDemo/demo.docx'，// 用 户 可 以 更 改 
下 心 。 SUCCess: function(res)} 1 

le /只 要 服务 疮 有 了 啊 应 数据 ， 束 会 进入 success () 回调 
下 二 if (res.statusCode==—~—~200) 1 

13: console .log(' 文 件 板 下 载 到 ;: ' + res.tempFilePath) 
下 that .setDatal(t 

Ls tipl: 提示: 文件 已 下 载 。 

16. tempFrFilePath: res.temprilePath 
开工 }) 

La } 

1 } 

20 上 

1 1 

22. // 获 取 临 时 文件 信息 

23. getFilelInfo: function() { 

24. var that=this 

ey let temprFilePath=this.data.tempFilePath 
之 6 ift (tempFilepPath=="") 1 

27 / /文件 尚未 保存 到 本 地 

28 wiX.ShowModal ({ 

29 Eliele ms 

30 content: 请 先 下 载 文件 ! '， 

下 二 showCancel: false 

人 }) 

了 了 3- } else 

34 / /获取 保存 的 文件 信息 


【 例 7-2】 文件 API 获取 临时 文件 信息 的 简单 应 用 
WXML (pages/demo/getFileInfo/getFileInfo.wxml) 文件 代码 如 下 : 


.<View class='title'>?2 .获取 I 临 时 文件 信息 的 简单 应 用 < /view> 


。 <VIiew Class='demo—box'> 


<View Class='title'>(1) 下 载 文 件 </Vview> 


<button 芋 YPe=- DPI1ImarY- bindtap="downloadEile"> 下 载 文 件 </button> 


<view class='title'>{{tipl}}</view> 


. </view> 
。 <VYVIew Class='demo—box'> 


<View Class='title'»> (2) 锋 取 临时 净 件 信息 < /view> 


<button type="primary” bindtap="getFilelnfo "> 获取 文件 信息 </button> 


<view Class='title'™>{ {tip2}}</view> 


.</view> 


JS (pages/demoysgetFileInfo/getFileInfo.js) 文件 代码 如 下 : 


tk 第 7 音 文件 AP| 已 吧 


站 wx.getFileInfol(! 

36. filePath: temprilePath, 
3 SUCCeSS: function (res) 1 
区 七 是 引 七 -Se 七 Data (1{ 

3 tip2: :文件 大 小 : ' + res.size + .Si 
40. }) 

41. } 

42 - }) 

43. } 

44. } 

42.1}) 


开 友 音 工具 预 宛 效 来 如 图 7-2 所 示 。 


EDEMO 


第 7 章 文件 API 
2. 获取 临时 文件 信息 的 简单 应 用 


(1) 下 载 文件 


下 载 葡 件 


提示 


eq 二 
请 先 下 载 文 件 ! 


(2) 获 取 临 时 文件 信息 


获取 文件 信息 


确定 
多 微 信 小 程序 开发 零 基础 入 门 


(a) 页 面 初始 效果 Cb) 未 下 载 文件 的 错误 提示 


第 7 章 文件 API 第 7 章 葡 件 API 
2. 获取 临时 文件 信息 的 简单 应 用 2. 获取 临时 文件 信息 的 简单 应 用 


(1) 下 载 叉 件 (1) 下 载 文件 


提示 : 文件 已 下 载 . 


了 (2) 著 取 临 时 文件 信息 


获取 文件 信息 获取 艾 件 信息 


文件 大 小 17924 字 节 ， 
已 微 信 小 程序 开发 零 基础 入 门 


忆 ) 微 信 小 程序 开发 堆 基 础 入 门 


Cc) 文件 下 载 成 功 Cd) 临时 文件 信息 获取 成 功 
图 7-2 ”获取 临时 文件 信息 的 简单 应 用 


本 7 微 信 小 程序 开发 零 基 础 入 门 已 y 


[ 民 Console Sources Network Security Audits Storage AppData Wxml Sensor Trace 
(yY | top v | Filter Default levels ™ 
Y Wed Aug 22 2618 19:58:58 GMT+6866 (中 国标 准时 间 》 配置 中 关闭 合法 域名 、web-view (业务 域名 ) 、TLS 版 本 以 及 HTTPS 证 书 检查 


|a b> 工具 未 校 验 合法 域名 、web-view〔 业 务 域名 ) 、TLS 版 本 以 及 HTTPS 证 书 。 
交 忻 被 下 载 到 ; http; 


» 


(Ce) 文件 下 载 成 功 时 Console〈 控 制 台 ) 的 输出 内 容 
图 7-2 〈 续 ) 


【代码 说 明 】 

本 示例 在 getFileInfo.wxml 中 设置 了 两 个 步骤 ,步骤 1 是 调用 wx.downloadFileO 下载 Word 
文件 demo.docx, 步骤 2 是 调用 wx.getFileInfoO 获 取 已 下 载 的 临时 文件 信息 。 每 个 步 又 部 配 有 有 
一 个 <button> 按 钮 触发 相应 的 事件 ， 用 户 必 须 按 步 又 顺序 音 击 ， 售 则 会 触 上 友 铬 误 提 示 。 每 个 
按钮 的 tap 事件 对 应 的 目 定义 函数 分 别 是 downloadFileg0 和 getFileInfo()。 

在 图 7-2 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 尚未 下 载 文 件 ， 图 (b) 是 未 下 载 文件 就 获 
取 文 件 信 息 的 错误 提示 ; 图 (c〉 和 图 (d) 分 别 是 文件 下 载 和 信息 获取 成 功 后 的 效果 ; 图 (e) 
是 文件 下 载 成 功 后 Console 控制 台 的 输出 内 容 。 


小 程序 使 用 wx.getSavedFileList(OBJECT) 获 取 本 地 已 保存 的 文件 列表 。 
OBJECT 参数 的 说 明 如 表 7-4 所 示 。 
表 7-4 wx.getSavedFileList(OBJECT) 的 参数 


参数 说 明 
success() 接口 调用 成 功 的 回调 函数 


由 


fail() 否 接口 调用 失败 的 回调 函数 
completeO 接口 调用 结束 的 回调 函数 (调用 成 功 与 吾 部 执行 》 


success0 返 回 参数 的 说 明 如 表 7-5 所 示 。 


表 7-5 success() 返 回 参数 
多 副本 
errMsg String 接口 调用 结果 


heris 文人 
其 中 ，fileList 中 项 目的 说 明 如 表 7-6 所 示 。 
表 7-6 fileList 项 目 说 明 


键 说 明 
filePath 文件 的 本 地 路 径 
createTime 文件 保存 时 的 时 间 惟 ， 从 1970/01/01 08:00:00 到 现在 的 秒 数 


size 文件 大 小 ， 单 位 为 B 


【 例 7-3】 文件 API 获取 本 地 文件 列表 的 简单 应 用 
WXML (pages/demo/getSavedFileList/getSavedFileList.wxml》〉 文 件 代码 如 下 : 
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1. <view class='title'>3. 获 取 本 地 文件 列表 的 和 蚀 单 应 用 </view> 

2. <View Class='demo—box'> 

: <V1IEeW class='title>(1) 人 保存 文件 </view> 

4. <button type="primary™ pindtap 一 "saveFile"> 保 存 文 件 </button> 

Se <view Class="'title'>{{tipl}}</view> L- 
6. </view> 

1. <Vview Class="'demo—box'> 视频 讲解 
8. <View class='title'>(2) 获 取 本 地 文件 列表 </view> 

> <button type="primary” bindtap="getSavedFileLi st"> 获 取 文 件 列表 </button> 


10. <view Cclass="'title’'>{ {tip2}}</view> 
11 .</view> 


JS (pages/demo/getSavedFileList/getSavedFileList.js〉 文件 代码 如 下 : 


- Page (li 
data: I 
savedFilePath: '"， // 本 地 艾 件 路 往 


/ /下 载 和 保存 文件 
saveFile: function()} I 


1 
2 
4. }, 
二 
6 
了 
8 Var that=this 


ne wxX.downloadFilel(tl 

10. url: "http://localhost/miniDemo/demo.docx'，// 用 户 可 以 更 改 
| 风 SUCCeSS: function(res) 1 

1 // 只 要 服务 器 有 啊 应 数据 ， 束 会 进入 success () 回调 
13- if (res.statusCode === 200) I 

上 / /保存 文件 到 本 地 

由 WX.SaveFilel(t 

16. tempFilePath: res.tempFilePpath, 

| SUCcCcess: function(res)} 1 

To console.1log(' 廊 件 保存 成 功 ! ') 

Ls that.setDatal(tf 

2 tipl: "提示 : 文件 已 保存 。'， 

= SavedFilePath: res.savedFilePath 
22. }) 

- } 

4. }) 

2 } 

a } 

21. }) 

28 


上 
29. // 获 取 本 地 文件 列表 
30- getSavedFileList:function(}l 
var that=this 
人 wx -etoavedPeileListl(l 
到 SUCCEeESsSs: Tunctiontresy | 
34. console.1log(res.fileList) 
Se that.setData lt 
36. tip2: "提示 : 文件 列表 已 获取 。: 
3 }) 


开 友 痢 工具 预 抠 戏 来 如 图 7-3 所 示 。 


本 [ 微 信 小 程序 开发 零 基 础 入 门 已 y 


重生 重生 本 全 伺 站 3t 二 > 20'54 


全 DEMO 


第 7 章 文件 APIl 
3. 获取 本 地 文件 列表 的 简单 应 用 


人) 保存 文件 


(2) 获 取 本 地 文件 列表 


获取 文件 列表 


品 微 信 小 程序 开发 要 基础 入 | ] 


(a) 页 面 初始 效果 


第 7 章 文件 API 
3. 获取 本 地 文件 列表 的 简单 应 用 


(1) 保 存 艾 件 


提示 


(2) 获 取 本 地 文件 列表 
获取 文件 列表 
提示 : 文件 列表 已 获取 。 
回 微 信 小 程序 开发 零 基础 入 门 


(ce) 保存 文件 若干 次 


UTCEs Netwark Sensor 


[® Ceonsale 
的 top 军 Filter 


b[] 


Seecurity Audits Stoerage AppData Wxrml 


Default levels ™ 


ETTTT EU 5 后 
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第 7 章 文件 API 
3. 获取 本 地 文件 列表 的 简单 应 用 


(车 ) 保 存 文 件 


保存 文件 


2) 获取 本 地 文件 列表 
获取 文件 列表 
提示 : 文件 列表 已 获取 。 
从 要 了 开发 本 三 入 门 N\ 


(b) 未 保存 文件 前 获取 文件 列表 


工本 20:58 


俩 EDEMO 


第 7 章 文件 API 
3. 获取 本 地 文件 列表 的 简单 应 用 


(1) 保 存 文 忻 


保存 文件 


提示 : 葡 件 已 保存 。 


(2) 获 取 本 地 文件 列表 


获取 文件 列表 


MA NA 


(d) 保存 文件 后 重新 获取 文件 列表 


Trace 


] ”Wed Aug 22 2018 26:57:45 GMT+8868 (中 国标 准时 间 》 配置 中 关闭 舍 法 域 各 ，web-view (业务 域名 )、TLS 厂 于 以 及 HTTPS 证 书 检 查 


上 有 具 未 校 验 合法 域 种 ，web view ( 业 汽 域 闻 ) 


加 文件 保存 成 功 ! 


TLS 由 六 凡 点 HTTPS 证 书 ， 


VO2) [fs {HH 


bbe; {filePath: "http;/ /store/ww19879110a0TeleBa. 06zAJS2NNMBelG UU=Pq..0pzMzLoFGeoedee2ccaeracBabcftaadaff295ddb27bft .docx" , size:; 17924, createTime: 
bb 1: {filepath: "http:;/ /store/wx19879119a8T90leBa.06zAJS2XMMBeElG_U-Pq. AedAXATaGGFoeG2ccaerac8abcfeageff295ddb27bf .docx", size: 17924, createTime: 


length: 2 
be proto__: Arrayt(g) 
> | 


ce) Console (控制 台 ) 的 输出 内 容 
图 7-3 ”获取 本 地 文件 列表 的 简单 应 用 


【代码 说 明 】 


本 示例 在 getSavedFileList.wxml 中 设置 了 两 个 步骤 ， 步 又 1 是 调用 wx.downloadFileO 和 
S 
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wx.saveFileO 下载 并 保存 Word 文件 demo.docx， 和 步骤 2 是 调用 wx.getSavedFileListO 获 取 已 保 
存 的 全 部 文件 列表 。 每 个 步 又 都 配 有 一 个 <button= 按 钮 触发 相应 的 事件 ， 且 tap 事件 对 应 的 自 
定义 图 数 分 别 是 saveFile0 和 getSavedFileListO。 

在 图 7-3 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 尚未 保存 文件 ， 图 (b) 是 未 保存 文件 前 直 
接 获 取 文 件 列 表 的 效果 ， 此 时 文件 列表 为 衬 ， 对 应 图 (e) 的 第 1 行 输 出 代码 ， 图 (c) 是 成 
功 保 存 文件 的 效果 ， 共 单 击 两 沈 ， 对 应 图 (e) 的 第 4 行 输出 代码 ， 此 时 实际 上 是 同一 个 文件 
保存 了 两 份 临 时 文件 ， 图 (d) 是 保存 文件 后 重新 获取 文件 列表 的 效果 ， 对 应 图 (e) 第 5 行 
以 下 的 全 部 代码 ， 由 该 图 可 见 此 时 输出 了 一 个 具有 两 个 元 系 的 数组 ， 每 个 元 系 对 应 一 个 保存 
后 的 本 地 文件 。 

证 要 注意 的 是 ,同一 个 小 程 厅 项 目 中 其 他 页 面 保存 过 的 文件 也 会 补 wx.getSavedFileListO 
读 取 到 ， 因 此 初始 查询 列表 有 可 能 不 为 室 。 如 果 用 户 介 意 影 响 测 试 效 果 ， 可 以 配合 使 用 
wx.removeSavedFile0 先 批量 删除 本 地 文件 再 进行 测试 。 


小 程序 使 用 wx.getSavedFileInfo(OBJECT) 歼 取 本 地 文件 的 信息 。 此 接口 只 能 用 于 获取 已 
保存 到 本 地 的 文件 ， 夺 需要 获取 临时 文件 信息 ， 请 使 用 wx.getFileInfo0。 
OBJECT 参数 的 说 明 如 表 7-7 所 示 。 


表 7-7 WwWx.getSavedFilelnfo(OBJECT) 的 参数 
参数 说 。 明 
flepath 文件 路径 
success() 接口 调用 成 功 的 回调 图 数 ， 返 回 结果 见 success0 返 回 参 数 的 说 明 
failO 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 痢 执行 ) 
success(0 退 回 参数 的 说 明 如 表 7-8 所 示 。 


表 7-8 success() 返 回 参数 
参数 说 明 
errMsg 接口 调用 结果 
size 文件 大 小 ， 单 位 为 也 
createTime 文件 保存 时 的 时 间 截 ， 


【 例 7-4】 文件 API 获取 本 地 文件 信息 的 简单 应 用 
WXML (pages/demo/getSavedFileInfo/getSavedFileInfo.wxml) 文件 代码 如 下 : 


从 1970/01/01 08:00:00 到 该 时 刻 的 秒 数 


1. <view class='title'>4. 获 取 本 地 文件 信息 的 简单 应 用 </view> : 
2. <View Class="demo—box'> 

了 <view class='title'>(1) 下 载 文件 </view> 视频 讲解 
4. <button type=" "pIrimary™ bindtap="dowmnloadFEile"> 下 载 文件 </button> 
6 

| 

8 


<view class="'title'>{{tipl}}</view> 
. </vVview> 
. <View Class='demo-box'> 
<view class="'title'>(2) 保 存 文件 </view> 
9. <button typeQ="primary” bindtap-"saveFile"> 保 存 文件 </button> 
10. <view Cclass="'title'>{{tip2}}</view> 
11 .</view> 
12.<Vview Class="'demo—box'> 


卫 5。 微 信 小 程序 开发 零 基础 入 门 


13. <view class='title5>(3) 获 取 本 地 文件 信息 </Vview> 


14. <button type="primarv" bindtap-"getSavedFileInfo"> 锋 取 文 件 信 息 </button> 


15. <view class="'title'™>{{tip3}1}</view> 
16.</view> 


JS (pages/demo/getSavedFileInfo/getSavedFileInfo.js〉 文 件 代 公 如下: 


1. Page l(t{ 
Pa data: I 
De temrFilepaths "" /7 临时 文件 路 径 


4. savedFilePath: 1 / /本 地 文件 路 径 


- jj， 
565 以 7 下 天 芝 件 


人 downljoadFile: function() 1 


38. var that=this 

a WX.downloadFilel(l 

10. Wel Si rt 站 OCT /7 用户 可 以 更 改 
ss SUCCeSS: Tunct1lIon (TeS) 

有 只 要 服务 器 有 啊 应 数据 ， 就 会 进入 success () 回调 

i bs 2 (res.statusCode === 200) I 

14. console .1log (' 交 件 被 下 载 到 ; ' + res.tempFilePath) 
ls that.setDatal(t 

16. tip1 " 握 示 : 净 件 己 下 载 。 

i tempFilePath: res.tempFilePath 

18 }) 

Lo } 

20. } 

ed }) 

Wa 


}, 
23.  / /保存 文件 


274. saveFile: functiont() ff 


ea var that=this 

26. let tempFilePath=this.data.tempFilePath 
po - if (temprFilePath==""") I 

28. // 文 件 尚 未 下 载 

ee wxXx.ShowModal ({ 

30 - title: ' 提 示 "， 

1] content: ?请 先 下 载 文 件 ! '， 

2 showCancel: false 

2 }) 

34. } else 

35. /7 保 序 文件 到 本 地 

36 - wxXx.SaveFilel(t 

号 让 tempFilePath: 人 

38. SUCCeESS: function (res) 

39. console.logl(" 外 入 训 在 到 |， 1 + res.savedFilepPath) 
40. that.setDatal(t 

Al tip2: ' 提 示 : 文件 已 保存 。 

i savedFilePath: res.savedFilePath 
3 }) 

44. } 

全 本 }) 

46. } 

41. 


}, 
48. // 著 取 文 件 信 息 


49. getSavedFileInfo: functiont(} 1{ 


50. var that=this 

=|]. let savedFilePath=this.data.savedFilepath 
a if (savedFilepPpath==—=""} 1 

53. /7 文件 疝 未 保存 到 本 地 

be WX.ShowModal (1{ 


55. title: ' 提 示 "， 


{HY 第 7 章 文件 AP! 了 


56. content: ' 请 先 保存 文件 ! '， 
ee showCancel: false 
8 - }) 


2 } else I 
60. // 获 取保 存 的 文件 信息 


1. wx.getSsavedF1ilelInfol(l 

62. filePath: savedFilepath, 
避 3 了 3- SUCCeESS: function (res) 1 
64. that.setDatalt 

65 . tip3s 工 广 件 大 小 : 于 res.size 十 "学 节 。"' 
ee - }) 

of. } 

68. }) 

69. } 

0. 1} 

1.1}} 


开 友 童工 具 预 宛 效 采 如 图 7-4 所 示 。 
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4. 获取 本 地 文件 信息 的 简单 应 用 


(1) 下 载 文件 


(3 获取 本 地 艾 件 信息 
菠 取 区 件 信 息 


守 宾 信 小 程序 开发 零 基 础 入 门 


(a) 上 页面 初始 效 采 (b) 未 下 载 文件 锻 误 提示 Cc) 未 保存 文件 铺 误 提示 


第 7 童 文 件 API 第 7 章 文 件 API 第 7 章 文件 Api 
二 4. 获取 本 地 文件 信息 的 简单 应 用 4 获取 本 地 文件 信息 的 简单 应 用 
(下 载 文 件 (1) 下 载 交 件 全 下 载 文件 

下 载 文件 下 载 文件 
提示 : 葡 件 已 下 载 ， 提示 : 立 件 已 下 载 。 


(2) 保 存 文件 ; 人 2) 保存 文件 (2 保存 文件 


提示 : 文件 已 保存 . 


(3) 获 取 本 地 文件 信息 


) 获 取 3) 获 取 本 地 文件 信息 
获取 文件 信息 (3) 获 取 本 地 文件 信息 | (3) 获 取 本 地 文件 信 
信和 | \ 引文 件 信息 


获取 艾 件 信息 
如 微 信 小 程序 开发 地 基础 入 门 


局 裕 人 小 程序 开发 零 基础 人 门 
名 微 信 小 程序 开发 零 基础 六 门 


(d) 文件 下 载 成 功 Ce) 文件 保存 成 功 (fy 文件 信息 获取 成 功 


图 7-4 获取 本 地 文件 信息 的 简单 应 用 


下 微 信 小 程序 开发 零 基础 入 门 二 


Console Sources Network Security Audits Storage AppData Wxml Sensor Trace 


下 Filter Default levels ™ 


Wed Aug 22 2818 19:44:23 GMT+8888 (中 国标 准时 间 》 配置 中 关闭 合法 域名 、web-view〔 业 务 域名 ) 、TLS 版 本 以 及 HTTPS 证 书 检 查 


| 人 A 工具 未 校 验 合法 域名 、 
六 件 被 下 载 到 : http: 


> 
(g) 文件 下 载 和 保存 成 功 时 Console (控制 台 ) 的 输出 内 容 
图 7-4 〈 续 ) 


【代码 说 明 】 

本 示例 在 getSavedFileInfo.wxml 中 设置 了 3 个 步骤 ， 步 骤 1 是 调用 wx.downloadFileO 下 
载 Word 文件 demo.docx， 步 又 2 是 调用 wx.saveFile0 保 存 该 文件， 步骤 3 是 调用 
wxX.getSavedFileInfo0 获 取 本 地 文件 信息 。 每 个 步骤 都 配 有 一 个 <button> 按 钮 触发 相应 的 事件 ， 
用 户 必 须 按 步 又 顺 友 单 击 ， 人 耕 则 会 触发 错误 提示 。 每 个 按钮 的 tap 事件 对 应 的 目 定 义 函 数 分 
别 古 downloadFile()、saveFileO 〇 和 getSavedFileInfo(。 

在 图 7-4 中， 图 (a) 为 页 面 初 始 效 果 ， 此 时 尚未 下 载 文 件 ; 图 (b) 和 图 (c) 分 别 是 文 
件 未 下 载 和 未 保存 就 单 击 下 一 步 又 按钮 的 错误 提示 ; 图 (d) 和 图 (e) 分 别 是 文件 下 载 和 保 
存 成 功 的 提示 效果 ; 图 (f) 是 获取 到 本 地 保存 文件 的 大 小 ; (g) 是 文件 被 下 载 和 保存 时 
success0O 回 调 的 输出 内 容 。 


小 程序 使 用 wx.removeSavedFile(OBJECT) 删 除 本 地 已 保存 的 文件 。 
OBJECT 参数 的 说 明 如 表 7-9 所 示 。 


表 7-9 wx.removeSavedFile(OBJECT) 的 参数 
参数 说 ”有 明 


success0 接口 调用 成 功 的 回调 函数 
failO \ 接口 调用 失败 的 回调 函数 
complete() Fuction | 否 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


【 例 7-5】 文件 API 删除 已 保存 文件 的 简单 应 用 i 
WXML (pages/demo/removeSavedFile/removeSavedFile-wxml) 文件 代码 如 下 : 全 时 


ny| 村 | 和 


囊 


. <View class='title>5. 删 除 已 保存 文件 的 简单 应 用 </view> 
. <V1liew Class='demo—box'> 
<view class='title'>(1) 下 载 并 保存 文件 </vriew> 视频 讲解 
<button type="pIrimary” bindtap="saveFile"> 下 载 并 保存 文件 </button> 

<view Class='title'>{{tipl}}</view> 

. </view> 

. <Vliew Class='demo—box'> 

<view class='title'>(2) 删 除 净 件 </view> 

Sn <button type="primary” bindtap=" "removeF1ile" > 删除 文件 </button> 

10. <view class="title'™>{{tip2}]}</view> 

11 .</view> 

1l2.<view Class="'demo—box'> 

13. <view class='titlec>(3) 获 取 本 地 文件 信息 </view> 

14. <button type="primary” bindtap=" getSavedFileInfo"> 获 取 文 件 信 尼 </button> 


下] 
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15. <view class='title'>{{tip3}}</view> 
16.</Vview> 


JS (pages/demo/removeSavedFile/removeSavedFile.Js) 文件 代码 如 下 : 


Eagell 
局 data: { 
3 savedFilePath: '"， // 本 地 文件 路 径 


和 时 }, 

5. ”// 下 载 和 保存 文件 

6. saveFlile: function() 1 

a var that=this 

3. wiXx.downloadFile l(t! 

he url: 'http://localhost/miniDemo/demo.docx'，// 用 户 可 以 更 改 
10. SUCCeSS: function(res) I 

11: // 只 要 服务 器 有 啊 应 数据 ， 就 会 进入 success () 回调 
| i (res.statusCode=—=—=200) { 

13. console .log (' 交 件 被 下 载 到 ; ' + res.tempFilePath) 
14. / /保存 文件 到 本 地 

I WX.SaveFilel(t 

16-. temprFilePath: res.TtemprilePath. 

Li success: function{(res) 1 

18. console.logt(' 净 件 被 保存 到 : ”二 res.savedFilepPpath) 
19. that.setDatal(t 

20. tipl: "提示 : 文件 已 保 仔 。"， 

i savedFilePath: res.savedFilePath 
2 }) 

23. } 

了 }) 

He } 

26. } 

a: }) 

28. 上 

29. // 删 除 文件 

30. removeFile: functiont()} I{ 

Sl Var that=this 

2 Jet savedFilePath=this.data.savedFilePath 
本 3 if (savedFilePath=="") I 

34. /7 文件 疝 未 保存 

ee WX .ShowModal (1{ 

36. title: ' 提 示 "， 

7 content: ' 请 先 下 载 和 保存 文件 ! '， 

38. showCancel: false 

3 }) 

40. } else { 

a / /删除 本 地 文件 

过 二 三 WX -TemoVvesSaVveadE1lle ({ 

有 本 filePath: savedFilepath, 

44. SUCCeSS: function (res) 1 

a that.setDatal(tl 

Te tip2: ' 提 示 ; 文件 己 被 删除 。" 

1 }) 

48. } 

1 }) 

0. } 

二 下 二 


}, 
52. // 获 取 文 件 信 息 
53. gqetSavedFilelInfo: function() | 
J4. Var that=this 
he Jet savedFilePath=this.data.savedFilePath 
56. / /获取 保存 的 文件 信息 


a wxX.getSavedFileInfol(t 
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3. filePath: savedFilePath, 
ee Success: function(res) 1{ 
60. 七 at .SetData (1{ 

61. ED 天 小 
号 }) 

63. 上 上 

ed- fail: function(res) I 

695. Console.log (res) 

ee- that.setDatalt(t 

Gs tip3: ' 提 示 : 文件 不 存在 。" 
68. }} 

69. } 

10. 上 

Fa 

2 |) 


开 妈 者 工具 预 砚 效 末 如 图 7-3 所 示 。 


| EChat 二 0.26 
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(下载 并 保存 文件 (1 下 载 并 保存 文件 


下 载 并 保存 文件 
人) 删除 文件 es 
\ 清光 下 载 和 保存 文人 (2) 删 除 文件 
删除 文件 ee 
删除 文件 


[3) 著 取 本 地 文件 信息 
(3) 获 取 本 地 文件 信息 


获取 文件 信息 
获取 区 忻 信 息 


局 微 信 小 程序 开发 检 基 础 入 门 
已 微 信 小 程序 开发 零 基础 入 门 


(a) 页 面 初始 效果 (b) 未 保存 就 删除 文件 


种 呈 冲 重重 WE hal 过 20524 号 日生 间 生 二 遇 生 EL hat 到 24 
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(1) 下 载 并 保存 妇 忻 (了 下载 并 保存 文件 1) 下 载 并 保存 交 件 


Fa 文人 


提示 : 文件 已 保存 。 提示 : 葡 件 已 保存 。 提示 : 文件 已 保存 . 


(2) 删 除 文件 (2) 副 除 文件 [2 删 阶 文件 
删除 文件 ] 出 除 文件 


必 示 : 文件 已 被 出 际 - 提示 : 文件 已 被 删除 


(G3) 获取 本 地 丸 件 信息 ss 
3) 获取 本 地 文件 信息 , G3} 获取 本 地 文件 信息 
获取 文件 信息 


获取 文件 信息 获取 文件 信息 
区 件 大 小 : 17924 字 节 . 提示 : 你 忻 不 存在 。 
oa 和 要 AI NA 
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Cd) 获取 文件 信息 Ce) 删除 文件 成 功 a 
图 7-5 删除 文件 的 简单 应 
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【代码 说 明 】 

本 示例 在 removeSavedFile.wxml 中 设置 了 3 个 步 又， 步骤 1 是 调用 wx.downloadFilegO0 和 
wxX.saveFileO 下 载 并 保存 Word 文件 demo.docx, 步 又 2 是 调用 wx.removeSavedFile0 删 除 该 文 
件 ， 步 又 3 是 调用 wx.getSavedFileInfoO 著 取 本 地 文件 信息 。 每 个 步 又 部 配 有 一 个 <button> 接 
钮 触发 相应 的 事件 ，3 个 按钮 的 tap 事件 对 应 的 自 定义 函数 分 别 是 saveFileg0、removeFilegO 和 
getSavedFileInfo() 。 

在 图 7-5 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 是 文件 尚未 下 载 和 保存 就 执行 删除 操作 
的 错误 提示 ; 图 (c) 和 图 (d) 分 别 是 文件 保存 成 功 和 获取 本 地 文件 信息 的 效果 ; 图 (e) 是 
删除 文件 成 功 的 效果 ; 图 (f) 是 在 删除 文件 后 重新 符 试 获取 文件 信息 ， 由 该 图 可 见 此 时 会 提 
示 文 件 不 存在 ， 说 明文 件 已 被 删 除 。 


小 程序 使 用 wx.openDocument(OBJECT) 新 开 页 面 打开 文档 ， 其 文 持 doc、xls、ppt、pdf、 
docx、Xlsx、Ppptx 等 格式 。OBJECT 参数 的 说 明 如 表 7-10 所 示 。 


7-10 wx.openDocument(OBJECT) 的 参数 


参数 说 明 
filePath Ta 文件 路 径 ， 可 通过 downFileO 获 得 


攻 加 文件 类 型 ， 指 定 文件 类 型 打开 文件 ， 有 效 值 为 doc、xls、ppt、pdf、 
ye pn | 二 十 二 pptx (最 低 版 本 为 1.4.0) 


success() 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 
complete() i 接口 调用 结束 的 回调 函数 (调用 成 功 与 耕 剖 执行 ) 


【 例 7-6】 文件 API 打开 文档 的 简单 应 用 
WXML (pages/demo/openDocument/openDocument.wxml) 文件 代码 如 下 : 


. <view class='title'>6. 打 开 文 档 的 简单 应 用 </view> 
. <V1liew Class='demo—box'> 

<view Class='title'>(1) 下 载 交 件 </view> 
<button type=" primary”™ pindtap-"downloadFile"> 下 载 交 件 </button> 
<view Class='title'>{{tip}}</view> 

. </vVview> 

. <View Class='demo—box'> 

<view Class='title'>(2) 打 开交 件 </view> 

<button type="pIrimary™ bindtap-"openDocument"> 打 开 文 件 </button> 
0 .</view> 


视频 讲解 


于 


JS (pages/demo/openDocument/openDocument.]s) 文件 代码 如 下 : 


- Page (i{ 
data: 1 
Bath: 


}, 

/ /下 载 文 件 

downloadFile: function()} f{ 
var that=this 
wx.downloadFilerl(t 


下 
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二 url: http://localhost/miniDemo/demo .docx' ， 
10. SUCCeSS: function(res) 1 

1 / /只 要 服务 器 有 啊 应 数据 ， 束 会 进入 success () 回调 
Ts if (res.statusCode==~—~200) | 

13. console. log (lres) 

Li that.setDatal(t 

号 tip: 提示: 文件 已 下 载 ' ， 

16. path: res.temprjlePath 

工 / - }) 

ls } 

Ls } 

20. }) 

1. 上 

22. // 打 开 文 件 

23- openDocument: functiont(}) 1 

24. let path=this.data.path 

2 / /文档 尚未 下 载 

a i (path=—=—="") 1{| 

214. wxXx.showModal l(t 

9a el 

29. content: 请 先 下 载 文 档 ! '， 

0. showCancel: false 

31- }) 

了- } 

六 / /打开 文档 

34. else 1{ 

3 WX.openDocument ({ filePath: path }) 
36. } 

本 

38 . 上) 
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下 载 文件 


人 2) 打 开 文 件 


打开 文件 


号 微 信 小 程序 开发 要 基础 入 门 
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DEMO 


Cb) 未 下 载 文件 的 错误 提示 


7-6 打开 文档 的 简单 应 用 
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(1) 下 载 文 件 


下 载 文件 


提示 : 文件 已 下 载 


(2) 打 开 文 件 


打开 文件 


心 微 信 小 程序 开发 零 基础 入 门 
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Console Sources Network 沙 


于 Filter Default levels ™ 
7 Wed Aug 22 2818 17:35:19 GMT+86888 (中 国标 准时 间 ) 配置 中 关闭 合法 域名 、web- VM2114 appservice:1999 
view〔 业 务 域名 ) 、TLS 版 本 以 及 HTTPS 证 书 检查 
| 鱼 Pp 工 具 未 校 验 合法 域 吕 、web-view【《 业 务 域名 〉、TLS 版 本 以 及 HTTPS 证 书 ， VM2189:1 
openDocument.]s? [sm|:18 
{TtempFiLePath: "http://tmp/wx19679110a08f61e8a.o6zAISs2XMBe1G U-P9XNM.. 
gM9w9psdExMb9e62ccae7ac8abcfea98ff295ddb27bf .docx", statusCode: 2886, errisg: "downLoadFilLe:ok"} 


Cd) 文件 下 载 成 功 时 Console〔 控 制 台 ) 的 输出 内 容 


= = WxX1907911l0a0f0le8a.o6zAJs2XMBelG_u-PqXMDuKvIl68c.gM93w9psdExMb9e62ccae7ac8abd... 
开始 揪 页 面市 局 引用 邮件 审阅 视图 加 戟 项 
一 uy Ee _ a 
F ”宋体 (中文 小 初 A 汪 - 汪 "EF" 证 语 | 全 " 让 | AaBbccpdipagbccod AaBhb- 
本 国 7 Ux = 相国 | 本 -| 鱼 : 下 - “正文 | “无 间隔 标题 1 


"ii 


页 面 : 1/1 | 字数 : 9 | 中 文 (中 国 ) | 


Ce) 被 打开 的 文档 效果 


图 7-6 ( 续 ) 


【代码 说 明 】 

本 示例 在 openDocument.wxml 中 设置 了 两 个 步骤 ， 步 又 1 是 调用 wx.downloadFileO 下载 
Word 文件 demo.docx， 步 又 2 是 调用 wx-openDocumentO 打 开 该 文件。 每 个 步骤 都 配 有 一 个 
<button> 按 钮 触 友 相应 的 事件 ， 且 必须 按照 步骤 顺序 依次 完成 。 这 两 个 按钮 的 tap 事件 对 应 的 
定义 图 数 分 别 是 downloadFile0 和 openDocument()。 

在 图 7-6 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 是 尚未 下 载 文 件 就 单 击 “打开 文件 ” 按 
钮 的 效果 ， 会 得 到 一 个 错误 提示 ; 图 (c) 是 文件 下 载 成 功 的 效果 ; 图 (d) 是 文件 下 载 成 功 
时 回调 函数 在 Console《〈 控 制 台 ) 打印 输 出 的 内 容 ， 由 该 图 可 见 获得 了 文件 的 临时 地 址 ， 图 
(e) 是 被 打开 的 文档 效果 。 


本 章 主 要 介绍 小 程序 数据 缓存 API 的 应 用 ， 包 括 数据 的 存储 、 获 取 、 删 除 、 清 空 ， 以 及 
存储 信息 的 获取 。 

学 习 目标 

了 解 小 程序 本 地 缓存 的 概念 ; 

掌握 数据 存储 相关 接口 的 用 法 ; 

掌握 数据 获取 相关 接口 的 用 法 ; 

掌握 存储 信息 获取 相关 接口 的 用 法 ; 


掌握 数据 删除 相关 接口 的 用 法 ; 
掌握 数据 清空 相关 接口 的 用 法 。 


为 了 提高 使 用 的 便捷 性 ， 同 一 个 小 程序 允许 每 个 用 户 单 独 存 储 10MB 以 内 的 数据 在 本 地 
设备 中 ， 这 些 数 据 称 为 小 程序 的 本 地 缓存 。 开 发 者 可 以 通过 数据 缓存 API 对 本 地 缓存 进行 设 
置 、 获 取 和 清空 工作 。 小 程序 的 本 地 缓存 以 用 户 维 度 来 进行 隔离 ， 假 设 有 A、B 两 位 用 户 共 
用 同一 台 设 备 ，A 用 户 是 无 法 读 取 到 也 用 户 相 关 数 据 的 ， 反 之 亦 然 。 

需要 注意 的 是 ， 小 程序 的 本 地 缓存 仅 用 于 方便 用 户 ， 如 果 用 户 设备 的 存储 空间 不 足 ， 微 
信 会 清空 最 近 较 久未 使 用 的 本 地 缓存 。 因 此 不 建议 用 户 将 关键 信息 全 部 存在 本 地 ， 以 免 存 储 
空间 不 足 或 设备 更 换 。 

数据 缓存 API 目前 共有 5 类， 包括 数 据 的 存储 、 获 取 、 删 除 、 清 空 ， 以 及 存储 信息 的 获 
取 。 每 一 类 均 分 为 异步 和 同步 两 种 函数 写法 ， 具 体内 容 如 表 8-1 所 示 。 


表 8-1 数据 缓存 API 的 相关 函数 


时 数 名 称 说 明 
wx.setStorage(OBJECT) 数据 的 存储 《〈 弄 步 ) 
wx.setStorageSync(KEY.DATA) 数据 的 存储 (同步 ) 
wx.getStorage(OBJECT) 数据 的 获取 〈 开 步 ) 
WX.getStorageSync(KEY) 数据 的 获取 【同步 ) 
wx.getStorageInfo(OBJECT) 存储 信息 的 获取 《 开 步 ) 
wxX.getStorageInfoSyncO) 存储 信息 的 狭 取 (同步 ) 
wx.removeStorage(OBJECT) 数据 的 删除 〈 弄 步 ) 
WX.IemoveStorageSync(KEY) 数据 的 删除 (同步 ) 
Wx.clearStorage() 数据 的 清空 〈 开 步 ) 


WX.clearStorageSync() 数据 的 清空 (同步 ) 
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该 表 中 的 Sync 来 源 于 英文 单词 synchronization 的 前 4 个 字母 ， 表 示 同 步 的 意思 。 因 此 数 
据 绥 存 API 中 市 有 Sync 字样 的 函数 均 为 同步 函数 ， 耕 则 就 是 异步 负数 。 


8.2.1 异步 存储 数据 


小 程序 使 用 寞 步 接口 wx.setStorage(OBJECT) 将 数据 存储 在 本 地 比 存 中 指定 的 key 中 ， 
OBJECT 参数 的 说 明 如 表 8-2 所 示 。 


表 8-2 wx.setStorage(OBJECT) 的 参数 


参 数 | 类 型 | 必 填 _ 说 明 


Ee 本 地 缓存 中 指定 的 key 


data 需要 存储 的 内 容 
successO 否 接口 调用 成 功 的 回调 函数 


让 


failO 接口 调用 失败 的 回调 函数 


complete() 任 接口 调用 结束 的 回调 函数 (调用 成 功 与 吾 剖 执行》 


| 


注意 : 如 果 指 定 的 key 原先 已 存在 ， 则 新 数据 会 履 盖 掉 原 来 该 key 对 应 的 内 容 。 


wx.setStorage(OBJECT) 示 例 代 码 格 式 如 下 : 


] 。 wx.SetSstorage ({ 

2 | 3 

汪 data: "value", 

了 SUuCcCcess:function(})ft 
5. / /存储 成 功 

2 上 

Re fail:functiont()I 

8. / /存储 失败 

上. } r 

10. complete: function()}1 
用 / /存储 完 成 

ee } 

13-.1) 


其 中 ， 引 号 中 的 key 和 value 可 以 替换 为 开发 者 需要 的 其 他 文本 内 容 ， 
日 successO0、falO0 和 completeO 国 数 可 以 省 略 不 写 。 

【 例 8-1】 数据 缓存 API 之 setStorage 的 简单 应 用 

WXMI (pages/demo01/setStorage/setStorage.wxml) 的 代 人 片段 如 下 : 


.<View class='title'"'>1 .数据 存储 setSstorage 的 简单 应 用 </view> 

. <VIiIew Cass= demo 一 boX > 

<VIieEw Class="'title'>wx.SsetStorage (OBJECT) 异步 存储 </view> 

<input name='kevy' placeholder=' 请 输入 KEY 和 名称 ' bindinput="'keyInput'" /> 
<lnput name="'data' placeholder= 请 输入 DATA 值 ， bindinput='dataInput" /> 
<button type=" "primary™ pindtap="setStorage"> 数 据 存储 </button> 

. </Vview> 


下 


JS (pages/demo01/setStorage/setStorage.js》 的 代码 厂 段 如 下 : 


元 5 微 信 小 程序 开发 零 基础 入 门 站 kt 


1. Page(l{ 

ep data: I 

en 

le lata 人 

总 加 }, 

6 。 KeYvImpPput: functionl(e) 1 

i this.setDatal({ key: e.detail .value }); 
}, 

Eee dataInput: function (e) 

10. this.setData({ data: e.detail -value })}; 
1 


il2. setSstorage: functiont(e) 


13 let key—this.data.key; 


14. if (key.length==0) { 


1 WwWX -ShowToast ({ 

16. title: 'KEY 不 能 为 空 ! 
11; LICon: ‘none'" 

18. }) 

1 } else 1{ 

20 . wx.Setstorage (tl{ 

-ll key: eV， 

a data: this.data.data 
23. }) 

24. } 

Te! “| 

26.1) 


运行 效果 如 图 8-1 所 示 。 
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1. 数据 存储 setSstorage 的 简单 应 用 


wWx.SetstoragelD 〇 DBJECT) 异步 存储 


请 输 六 长 EY 名称 


青 输 XDATA 值 


性 微 信 小 程序 开发 零 基础 入 门 


(a) 页 面 初始 效果 


[RK Console Sources Network 


过 汇 ... 


Key Value 
"123456" 


admin 


(d) 存储 数据 后 Storage 面板 的 效果 


数据 存储 setStorage 的 简单 应 用 


图 8-1 


四 
F 
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wx.setstoragelOQBJECT) 异 步 存 储 
请 辆 A 入 KEY 名 称 
请 输入 DATA 值 


类 担 和 在 使 
KEY 趟 能 为 空 ! 


Cb 提交 时 未 输入 KEY 名 称 


Security Audits Storage 
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1. 数据 存储 setSstorage 的 简单 应 用 


Wxy.setStoragelfO 〇 DBJECT) 异 步 存储 


各 dimin 


123456 


局 向 信 小 程序 开发 要 基础 入 门 


(c) 数据 存储 完成 


AppData Wxml Sensor Trace 


【代码 说 明 】 

本 示例 在 setStorage.wxml 中 设置 了 两 个 <input> 组 件 分 别 用 于 输入 KEY 名 称 和 DATA 值 ， 
并 使 用 <button> 组 件 进 行 数 据 的 提交 。 在 setStorage.js 的 data 属性 中 预 设 key 和 data 均 为 空 
日 内 容 ， 等 待 更新; 然后 使 用 目 定 义 图 数 keyImputO0 和 dataInputO 来 获取 这 两 个 输入 框 中 的 内 
容 ， 并 更 新 到 data 属性 中 ; 使 用 自 定义 函数 setStorageO 获 取 更 新 后 的 key 值 并 进行 判断 ， 如 
末 为 空 则 提示 有 用户 输 入， 如 条 不 为 空 则 调用 wx.setStorage0 函 数 进行 弄 步 存 储 。 

在 图 8-1 中 ,图 (a) 为 页 面 初始 效果 ; 图 (b) 为 未 输入 KEY 名 称 时 的 提示 效果 ; 图 (¢c) 
为 数据 存储 完成 后 的 状态 : 图 (d) 是 和 存储 数据 后 调试 事 中 Storage 面板 的 效果 ， 由 该 图 可 见 
数据 已 经 成 功 存储 。 

8.2.2 ”同步 存储 数据 
小 程序 使 用 同步 接口 wx.setStorageSync(KEY,DATA) 将 DATA 值 人 存储 到 本 地 缓存 中 指定 
的 KEY 中 ， 参 数 说 明 如 表 8-3 所 示 。 
表 8-3 wx.setStorageSync(KEY,DATA) 的 参数 
Ca 殉 
中 


data Object/String 需要 存储 的 内 容 


注意 : 如 果 指 定 的 key 原先 已 存在 ， 则 新 数据 会 履 盖 挥 原来 该 key 对 应 的 内 容 。 


Wx.setStorageSync(KEY.DATA) 示 例 代 人 码 格 式 如 下 : 


| 
WX - StStOITadeSYncCc (Key ， Value ) 
- catch (el) 1 


// 任 生 弄 般 


On 


} 


其 中 ， 引 号 中 的 key 和 value 可 以 莹 换 为 开发 者 需要 的 其 他 文本 内 容 ， 
try-catch 结构 也 可 以 省 略 不 写 。 

【 例 8-2】 数据 缓存 API 之 setStorageSync 的 简单 应 用 

WXML (pages/demo01/setStorageSync/setStorageSync.wWxml) 的 代码 片段 如 下 : 


. <view class='title">l .数据 存储 setstorageSync 的 简单 应 用 </view> 

- <View Cass= aemo 一 DoX > 

所 了 IEW class='title'>wx.setSstorageSync (KEY, DATA) 同步 存储 </view> 

<Input name="'key" placeholder=" 请 输入 KEY 名 称 ' bindinput='keyInput" /> 
<input name="'data'" placeholder=' 博 输入 DATA 但 ， bindinput="'dataInput"' /> 
<button type=" "primary™ pbindtap"setStorageSync"> 数 据 存 储 < /button> 

- </view> 


Tm 


JS (pages/demo01l/setStorageSyncy/setStorageSync.js) 的 代码 片段 如 下 : 


1. Page l(t{ 

z data: I 

本 key: ” ， 

4 data: "" 

2 }, 

6c KeYImPUt: function(le) 1 


后 缓存 AP| 世 ZA 


郊 7 微 信 小 程序 开发 零 基础 入 门 


es this.setDatal({ key: e.detail.value }); 

8. }, 

i dataInput: function(e) { 

Ls this.setDatat{ data: e.detail .value 上) 7 
li. 上 

l2. setSstorageSync: function(e} I 

Be let kev=this.data.kews 

14. if (key.length==0) { 

Ls wxX.ShowToast (1 

16. title: "KEY 不 能 为 空 ! ，， 

ds LICon: ‘none'" 

18. }) 

I } else | 

eal wx.SetSstorageSsync (keyrthis.data.data) 
a } 

22. } 

3.1) 


年 一 一 


运行 效果 如 图 8-2 所 示 。 
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1. 数据 存储 setStorageSync 的 简单 应 用 1. 数据 存储 setStorageSync 的 简单 应 用 


WXx.setStorageSsync(KEY,DATAI) 同 步 存储 Wx.setstorageSsymcfKEY,DATA) 同 步 存 情 


请 AKEY 9 HR 


请 输入 DATA 值 


KEY 直角 为 室 ! 
心 微 信 小 程序 开发 零 基 础 入 门 号 微 信人 站 程序 秆 友 寺 旺 加 


(a) 外 血 初 她 效 来 (b) 提交 时 未 输入 KEY 名 称 


第 8 章 数据 缓存 API 
1. 数据 存储 setStorageSsync 的 简单 应 用 


wx.setstorageSync(KEY,DATA) 同 步 存储 
admin ] 

654321 

数据 存储 


已 微 信 小 程序 开发 零 基 础 入 | ] 


CC) 数据 存 悄 完 成 


Console Sources Network Security Audits Storage AppData Wxml Sensor Trace 


Value 


“654321" 


Cd) 存储 数据 后 Storage 面板 的 效果 
图 8-2 ”数据 存储 setStorageSync 的 简单 应 用 


【代码 说 明 】 
本 示例 在 setStorageSync.wxml 中 人 设置 了 两 个 <input> 组 件 分 别 用 于 输入 KEY 名 称 和 


DATA 全 ,并 使 用 <button> 组 件 进行 数据 的 提交 。 在 setStorage.js 的 data 属 


竹中 预 设 key 和 data 


均 为 空 日 内 容 ， 等 每 更 新 ; 然后 使 用 目 定 义 图 数 keyImput0 和 dataInputO 来 获取 这 两 个 输入 框 
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中 的 和 内容， 并 更 新 到 data 属性 中 ; 使 用 目 定 义 图 数 setStorageSyncO 获 取 更 新 后 的 key 全 并 进 
行 判断 ， 如 果 为 空 则 提示 用 户 输入 ， 如 果 不 为 空 则 调用 wx.setStorageSync0O 图 数 进 行 同 步 存 储 。 

在 图 8-2 中 , 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 未 输入 KEY 名 称 时 的 提示 效果 ; 图 (¢c) 
为 数据 存储 完成 后 的 状态 : 图 (d) 是 存储 数据 后 调试 器 中 Storage 面板 的 效果 ， 由 访 图 可 见 
数据 已 经 成 功 存 储 。 


8.3.1 ”异步 获取 数据 


小 程序 便 用 开 步 接口 wx.getStorage(OBJECT) 从 本 地 绥 存 中 弄 步 获取 指定 key 对 应 的 内 
容 ，OBJECT 参数 的 说 明 如 表 8-4 所 示 。 


表 8-4 wx.getStorage(OBJECT) 的 参数 
参数 加 说 明 
key 本 地 缓存 中 指定 的 key 
success() 半生 接口 调用 成 功 的 回调 函数 ，res={data: key 对 应 的 内 容 } 
fal0 | Function | 否 | 接口 调用 失败 的 回调 函数 


completeO Function | 否 接口 调用 结束 的 回调 函数 (调用 成 功 、 和 失败 都 会 执行 ) 


其 中 ，success0 〇 返回 参数 data 表示 key 对 应 的 内 容 ， 该 值 为 String 类 型 。 
wxX.setStorage(OBJECT) 示 例 代 码 格式 如 下 : 


| 册 


ID 


- WX.getstorage ({ 

Rem ey 

SUcCcess: function(res)} 1{ 
console.l1log(res.data) 


) 


GO 上 Lu ho 请 


:. 上 二) 


中 的 ze res.data vesworen 
【 例 8-3】 数据 缓存 API 之 getStorage 的 简单 应 用 
WXML (pages/demo02/getStorage/getStorage.wxml) 的 代码 片段 如 下 : 


视频 讲解 


- <VIeEwW CaSsSsS= 七 1 七 已 > 数据 获取 JetSsStorage 的 简单 应 用 < /view> 

. <View Cass= Qemo 一 boxXx > 

<VLew Class="'title'>wx.getSstorage (OBJECT) 异步 获取 < /view> 

<input name='kev' placeholder=' 请 输入 KEY 名 称 ' bindinput='keyInput'" /> 
<button type="primary” bindtap-="getSstorage"> 数 据 犹 取 </button> 

<view Class='title'>DATA 值 : {{data}}</view> 

. </vVview> 


-5 


JS (pages/demo02/getStorage/getStorage.js〉 的 代 人 码 厂 段 如 下 : 


1. Paoge (tl{ 

pe data: I 

i We 

4. data: "尚未 获取 ， 


2 下 微 信 小 程序 开发 零 基础 入 门 “并 ki 


3 }, 

避 - KeYJImnput: functionle}) 1 

Se this.setDatal({ key: e.detail.value }); 
时 上 v 

~ getstorage: function() { 

10. var that=this; 


1 let kev=this.data.keyvs 
12. ift (key.length==0) { 


13. wiX.ShowToast(t{ 

下 可: title: 'KEY 不 能 为 空 ! '， 
3 1cCon: “mone 

16. }) 

有 } else 1{ 

3s WwWX -GetStoradgde (1l 

Lo key: keyr 

20. SUcCcess:function(res)}tl 
= that.setData({data: res.datal}) 
2 } 

i }) 

24。 } 

25. |} 

-6.1) 


运行 效果 如 图 8-3 所 示 。 
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admin "654321" 


Ca) 读 取 数据 前 Storage 面板 的 效果 
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2. 数据 获取 getStorage 的 简单 应 用 2. 数据 获取 getStorage 的 简单 应 用 2. 数据 获取 getStorage 的 简单 应 用 


wx.getStorage(OQBJECT) 异 步 获 取 wx.getStoragelOBJECT) 异 步 获 


请 输入 KEY 名 称 请 输入 KEY 和 名称 


DATA 值 : 尚未 获取 人 尖 


KEY 十 背 为 到 


Df 信和 小 程序 开发 要 基础 入 | ] 


(b) 页 面 初始 效果 (c) 提交 时 未 输入 KEY 名称 


图 8-3 数据 存储 getStorage 的 简单 应 用 


Wxml Sensor Trace 


1003 


国 晤 DEMO 志和 
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wx.getstorage(OQBJECT) 异 步 获取 


admin 


DATA 值 : 654321 


马 徽 估 小 程序 开发 零 基础 六 门 


(d) 数据 获取 完成 


外 
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【代码 说 明 】 

本 示例 在 getStorage.wxml 中 设置 了 <input> 组 件 用 于 输入 KEY 名 称 ， 并 使 用 <button> 组 
件 进 行 数据 的 获取 ， 在 按钮 下 方 使 用 了 <view> 组 件 录 示 获 取 到 的 DATA 值 。 在 getStorage.js 
的 data 属性 中 预 设 key 为 空白 内 容 、data 值 为 “尚未 获取 ”， 然 后 使 用 目 定 义 函 数 keyInputO 
来 获取 输入 框 内 容 并 更 新 data 值 ; 使 用 目 定 义 困 数 getStorageO 获 取 更 新 后 的 key 值 并 进行 判 
肠 ， 如 果 为 空 则 提示 用 户 输入 ， 如 果 不 为 空 则 调用 wx.getStorage0 函 数 进 行 数据 的 异步 获取 。 

在 图 8-3 中 ， (a) 是 读 取 数据 前 调试 右 中 Storage 面板 的 效果 ， 用 户 可 以 使 用 前 面 8.2 
节 的 任意 例题 事先 存储 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 ; 图 (b) 为 页 面 初 
始 效果 : 图 (c) 为 未 输入 KEY 名 称 时 的 提示 效果 ; 图 (d) 为 数据 获取 完成 后 的 状态 。 


8.3.2 ”同步 获取 数据 
小 程序 使 用 同步 接口 wx.getStorageSync(KEY) 从 本 地 绥 存 中 同步 获取 指定 KEY 对 应 的 内 
容 ， 参 数 说 明 如 表 8-5 所 示 。 


表 8-5 wx.getStorageSync(KEY) 的 参数 


CE 说 二 


wx.getStorageSync(KEY) 示 例 代 人 码 格 式 如 下 : 


Ls Ery 1 

2 . Var Value=wX .getSstorageSync ("key') 
了 1 (value) 1 { 

有 // 处 理 获 取 到 的 value 值 

8 

6. 1 a (e) I 

a // 发 生 寞 常 

8. } 


注意 : 引号 中 的 key 可 以 替换 为 实际 用 到 的 KEY 名 称 , try-catch 结构 也 可 以 省 略 不 写 。 


【 例 8-4】 数据 缓存 API 之 getStorageSynec 的 简单 应 用 TF 
WXML (pages/demo02/getStorageSync/getStorageSync.wxml) 的 代码 厂 全 二 SG- 
段 如 下 : 所 
回 Ee . =F 
1. <view class='titler>2 .数据 获取 JetstorageSync 的 简单 应 用 </view> l 
2. <view Class="demo box'> 视频 讲解 
二 <VIeW Class="title'>wxXx.getSstorageSync (KEY) 同步 获取 < /view> 
4. <input name-'key， placeholder=' 人 请 输入 KEY 名 称 ! bindinput='keyInput'" /> 
i <button type="primary™ bindtap="getStorageSync"> 数 据 获 取 </button> 


<V1iewWw class 一 "title'>DATA 值 : {{data}}</view> 
. </view> 


-i 


JS (pages/demo02/getStorageSync/getStorageSync.Jjs》 有 的 代 人 片段 如 下 : 


1. Page ({ 

Pe data: I 

J key: ” ， 

4. data: 1! 疝 未 获取 ， 

D. }, 

6. keyInput: functionl(le) 1 

Me this.setDatall{l kev: e.detail -Value 上 > 
8 . 上 7 


2 下 微 信 小 程序 开发 零 基础 入 门 志 y 


9. getstorageSync: function()} { 
10. var that=this; 

1 Jet kevy=—this.data.keyv; 
中 if (kevy.length==0) { 


13. WwWX -ShowTIToast ({ 

14. title: 'KEY 不 能 为 空 ! '， 

I lcon: ‘none'" 

lp. }) 

Te elLse 1{ 

18. Var value=wXx .getSsStorageSync (KeY) 
os if (value)tl 

0. that.setData({data:valuel}); 
a } 

2 } 

a 

-4.1}) 


运行 效果 如 图 -4 所 示 。 
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2. 数据 获取 getStorageSync 的 简单 应 用 2. 数据 获取 getStorageSync 的 简单 应 用 2. 数据 获取 getStorageSync 的 简单 应 用 


wx.getSstorageSync(KEY) 同 步 获取 wx.getSstorageSync(KEY) 同 步 获取 


请 输入 KEY 名 称 请 输入 KEY 名 种 


DATA 值 : 尚未 获取 


品 牧 和信 小 程序 开发 零 基础 入 门 


(b) 页 面 杞 始 效 未 (c) 过 区 时 未 输入 KEY 名 称 
图 8-4 数据 存储 getStorageSync 的 简单 应 用 


【 代 人 码 襄 明 】 


wx.getstorageSync(KEY) 同 步 获取 
admin 
数据 获取 
DATA 值 : 654321 


已 微 信 小 程序 开发 零 基础 入 门 


(d) 数据 获取 完成 


本 示例 在 getStorageSync.wxml 中 设置 了 <inpu 人 > 组件 用 于 输入 KEY 名 称 , 并 使 用 <button> 
组 件 进 行 数 据 的 获取 ， 在 按钮 下 方 使 用 了 <view> 组 件 显 示 获 取 到 的 DATA 值 。 在 
getStorageSync.js 的 data 属性 中 预 设 key 为 空 日 内 容 、data 值 为 “尚未 获取 ” 然后 使 用 目 定 
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义 图 数 keyInputO 来 获取 输入 框 内 容 并 更 新 data 值 ; 使 用 目 定 义 图 数 getStorageSyncO 狐 取 更 
新 后 的 key 值 并 进行 判断 , 如 果 为 空 则 提示 用 户 输入 , 如 果 不 为 空 则 调用 wx.getStorageSync0 
函数 进行 数据 的 同步 获取 。 

在 图 8-4 中 ,图 (a) 是 读 取 数据 前 调试 右 中 Storage 面板 的 效果 ， 用 户 可 以 使 用 前 面 8.2 
节 的 任意 例题 事先 存储 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 ; 图 (b) 为 页 面 初 
始 效果 ; 图 (c) 为 未 输入 KEY 名 称 时 的 提示 效果 ; 图 (d) 为 数据 获取 完成 后 的 状态 。 


8.4.1 卉 步 钛 取 存 储 信息 


小 程序 使 用 wx.getStorageImfo(OBJECT) 弄 步 获 取 当 前 本 地 缓存 数据 的 相关 信息 ， 
OBJECT 参数 的 说 明 如 表 8-6 所 示 。 


表 8-6 wx.getStoragelnfo(OBJECT) 的 参数 
参数 说 明 
接口 调用 成 功 的 回调 函数 
Rail0 接口 调用 失败 的 回调 函数 


completeO) 合 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


其 中 ，success0 返 回 的 主要 参数 如 下 。 
。 keys: String Array 类 型 ， 表 示 当 前 storage 中 所 有 的 key。 
e。 currentSize: Number 关 型 ， 表 示 当 前 占用 的 空间 大 小 《单位 为 KB) 。 


e limitSize: Number 类 型 ， 表 示 限 制 的 空间 大 小 〈 单 位 为 KB) 。 


d= 


wx.getStorageInfo(OBJECT) 示 例 代 公 格 式 如 下 : 


- WX.getSstoragelInfolt 

SUCCESS: function(tres) 1 
console.l1ogl(res.keys) 
Console.1logl(res.currentSize) 
CONnsole.1Logog {res.1imitS1ize) 


} 


下 


- 上 


需要 注意 的 是 ， 该 接口 只 能 用 于 获取 本 地 缓存 中 所 有 key 的 名 称 ，key 
对 应 的 值 还 需要 使 用 getStorage() (getStorageInfo()) 进一步 获取 。 

【 例 8-S】 数据 缓存 API 之 getStorageInfo 的 简单 应 用 

WXML (pages/demo03/getStorageInfo/getStorageInfo.wxml) 的 代码 片段 如 下 : 


. <view class='title'>3- 存 储 信 息 获 取 getsSstoragelinfo 的 简单 应 用 < /view> 

. <VIiIew Cass= demo 一 boX > 

<V1iew Class="'title'>wx.getStoragelnfo (OBJECT)} 异步 获取 </view> 

<button 七 YPe= primary” binadtap="dgqetStoragdeInfo"> 存 储 信 息 获 取 </button> 
<view Class='title'> 已 使 用 空间 :; {{currentSize}}KB</view> 

<view class='title'> 最 大 空 | 可 : {{l1imitSize} }KB</view> 

<VLeWwW Class="'title" wx:for="{{keys}}" wx: key=" key{{index}} >KEY{ {index}}: 
{{item} }</view> 


“< GO 上 ID 请 
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8. </view> 


JS (pages/demo03/getStorageInfo/getStorageImfo.js) 的 代码 片段 如 下 : 


1. Page (l 

ea getSstoragelInfo: function'() 

i Var that=this; 

4. wx.gqetSstoragelInfol(l 

Se SUccCcess: function(res) 1 

6 。 Console.1logilires}s 

We that.setDatal(tl 

38. currentSize: res.currentSsize, 
ER 1imitSsSize: res.1imitSsize, 
10. | 

1 }); 

1 } 

1 3 }) 

14. 1 

T1557 


运行 效果 如 图 8-5 所 示 。 
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wx.getSstorageInfofDBJECT) 异 步 获取 


已 使 用 空间 : 1KB 
最 大 空间 : 10240KB 
KEYO : test0 
kEY1L : testl 
KEY2 : test2 
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(c) 数据 获取 完成 


图 8-5 存储 信息 获取 getStoragelnfo 的 简单 应 用 


Trace 
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【代码 说 明了】 
本 示例 在 2etStorageInfo.wxml 中 设置 了 <button> 组 件 进行 数据 的 获取 ， 在 控 钮 下 方 使 用 


J 了 <view> 组 件 巡 示 获 取 到 的 存储 信息 。 竹 谍 到 key 但 可 能 不 止 一 个 ， 因 此 使 用 wx:for 循环 好 
示 对 应 的 <view>。 在 getStorageInfo.js 中 使 用 目 定 义 困 数 getStorageInfoO) 获 取 当 前 已 经 使 用 的 
空 | 导 (CcurrentSize)、 最 大 衬 旧 限制 (limitSize) 和 当前 存在 的 键 名 称 (keys), 然后 使 用 setData0) 
方法 将 这 些 参 数值 泻 染 到 getStorageInfo.wxml 页 面 上 。 


8.2 


在 图 8-5 中 ， 图 (a) 是 获取 存储 信息 前 调试 妖 中 Storage 面板 的 效果 ， 用 户 可 以 使 用 前 面 


节 的 任意 例题 事先 存储 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 图 (b) 为 页 面 初 


始 效果 ， 图 (0) 为 存储 信息 获取 完成 后 的 效果 。 
8.4.2 同步 狼 取 存储 信息 


小 程序 使 用 wx.getStorageInfoSyncO 同 步 获 取 当 前 本 地 绥 存 数据 的 相关 信息 。 
wx.getStorageInfoSync0O 示 例 代 码 格式 如 下 : 


1 trw 1 

有 二 VAar res~=wx.getSstoragelnifosyncl() 

3. console.1og (res.kevs) // 键 名 称 

4. console.1log(res.currentSize)  // 己 使 用 空间 
Ee console.log (res.1limitSize) /7 最 大 宪 团 限制 
6. 1} catchtie} 1 

7. // 发 生 异 常 

=] 


在 上 述 代 码 中 try-catch 结构 也 可 以 省 略 不 写 。 
【 例 8-6】 数据 缓存 API 之 getStoragelInfoSync 的 简单 应 用 
WXML (pages/demo03/getStorageInfoSync/getStorageInfoSync.wxml) 的 


代码 厂 段 如 下 : 
1. <viewclass='title'>3. 存 储 信 息 获 取 getSstoragelnfoSync 的 简单 应 用 </view> 
2. <View Cass= aqQemo 一 DOX > 
二 <VIeW Class="title'>wx.getSstoragelnfoSynci() 同步 获取 </view> 
4. <button type=" "primary™ bindtap=”"getStorageIntoSsvyncn"> 人 存储 信息 获取 </button> 
本 <view Class='title'> 已 使 用 空间 : {{currentsizel }KB</view> 
6 <view class='title'> 最 大 空 | 可: { {limitSsize}}KB</view> 
也 <VvViewclass="title" wx:for=" [KEYS 上 上 ' wx: key—' key{{index}t} >ERKEY|I index}}: 


{{item}}</view> 


. </view> 


JS (pages/demo03/getStorageInfoSync/getStorageInfoSync.js) 的 代 但 上 请 段 如 下 : 


1. Page l(t{ 

二 JetSsStoragelInfoSync: functiont() { 

: Var res~wx.getSstoragelInfoSync(}); 
4. this.setDatal(t 

本 全 CurrentSsize: res.currentSsize, 
6. 1imitSize: res.l1imitsize, 

pe keys: res.keys 

8. })s; 

9. } 

10.1) 


运行 效果 如 图 8-6 所 示 。 
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应 用 用 


wx.getstorageInfosyncl0 同 步 获取 wx.getSstoragelInfoSsync() 同 步 获 取 
已 使 用 空间 : KB 已 使 用 空间 : 1KB 
最 大 室 | 间 : KB 最 大 空间 : 10240KB 
局 微 信 小 程序 开发 零 基础 入 门 KEYD : test0 
KEY1 :test 
KEY2 : test2 


局 微 信 小 程序 开发 零 基础 入 门 


Cb) 页 面 初始 效果 (Cc) 数据 获取 完 局 
图 8-6 存储 信息 获取 getStoragelnfoSync 的 简单 应 用 


【代码 说 明 】 

本 示例 在 getStorageInfoSync.wxml 中 设置 了 <button> 组 件 进行 数据 的 著 取 ， 在 按钮 下 方 
使 用 了 <view> 组 件 显 示 获 取 到 的 存储 信息 。 考 虑 到 key 值 可 能 不 止 一 个 ， 因 此 使 用 wx:for 循 
环 显示 对 应 的 <view>。 在 getStorageInfoSync.js 中 使 用 目 定 义 图 数 getStorageInfoSyncO 获 取 当 
前 已 经 使 用 的 空间 (currentSize)、 最 大 空间 限制 (limitSize〉 和 当前 存在 的 键 名 称 〈keys )， 
然后 使 用 setData0 方 法 将 这 些 参 数值 演 染 到 getStorageInfoSync.wxml 页 面 上 。 

在 图 8-6 中 ， 图 (a) 是 获取 存储 信息 前 调试 化 中 Storage 面板 的 效果 ， 用 户 可 以 使 用 前 
面 8.2 节 的 任意 例题 事先 存储 的 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 ;图 (b) 
为 页 面 初始 效果 ; 图 (c) 为 存储 信息 获取 完成 后 的 效果 。 


8.5.1 ”异步 删除 效 据 
小 程序 使 用 wx.removeStorage(OBJECT) 从 本 地 缓存 中 异步 删除 指定 KEY 名 称 和 对 应 的 
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值 ，OBJECT 参数 的 说 明 如 表 8-7 所 示 。 


表 8-7 wx.removeStorage(OBJECT) 的 参数 


参 数 类 型 说 明 
key 本 地 缓存 中 指定 的 key 
success() 接口 调用 的 回调 函数 
failO) Function 接口 调用 失败 的 回调 函数 
completeO) 接口 调用 结束 的 回调 函数 《调用 成 功 与 否 郡 执行 ) 


wX.removeStorage(OBJECT) 示 例 代 码 格 式 如 下 : 


. WX. IemoveStoragel(l 

1 

SUCCeESS: function(res} 1{ 
console.l1og (res) 


} 


TT 


3 


上 述 代码 中 引号 内 的 key 可 以 替换 为 实际 用 到 的 KEY 名 称 ， 且 successO 函 数 中 res 包含 
的 内 容 为 {errMsg:"removeStorage:ok"}。 

【 例 8-7】 数据 缓存 API 之 removeStorage 的 简单 应 用 

WXML (pages/demo04/removeStorage/removeStorage.wxml) 的 代码 片段 如 下 : 


- <Vliew Class='title'»>4. 数据 删除 removeStorage 的 简单 应 用 </Vview> 
。 VIEW Class=" aemo 一 boX > 视频 讲解 
<View Class='title'>wx.removeSstorage (OBJECT) 异步 删除 < /view> 

<input name="key" placeholder=" 请 输入 KEY 名 称 ， bindinput='keyInput" /> 
<button type="primary” bindtap="removeStorage "> 数据 删除 </button> 

. </view> 


nn 


a 


JS (pages/demo04/removeStorage/removeStorage.js) 的 代码 上 请 段 如 下 : 


1. Page lt{ 

之 - data: I 

本 key: "" 

4. }, 

ee keyInput: functionl(le) I 

6. Enis SelLDalsgll ev eederarl valne 51s 
J }, 

38. removeStorage: function() I{ 
Hs let kevy~—this.data.keys 
10. ift (key.length==0) { 

1 0 wx.ShowToast(t{ 

和 title: 'KEY 不 能 为 空 ! ，'， 
1 ICon: mone 

14. }) 

I } else 1({ 

> wxX.removeStorage ({ 

有 | 

1B. SUCCeSS: function (res) 1 
下 号 WX -ShowTIoast ({ 

2 0 title: "删除 完毕 ! ，， 
a 上 1con: none 

2. }) 

23. } 

4- }) 


ee } 
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运行 效果 如 图 8-7 所 示 。 
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wx.removestorage(OBJECT) 异 步 删除 


testz 


丰 ) 微 信 | 


Cd) 数据 删除 完成 
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图 8-7 数据 删除 removeStorage 的 简单 应 用 


【 代 人 码 说 明 】 


本 示例 在 removeStorage.wxml 中 设置 了 <input> 组 件 用 于 输入 KEY 名 称 , 并 使 用 <button> 
组 件 进行 数据 的 删除 。 在 removeStorage.js 的 data 属性 中 预 设 key 为 空白 内 容 ; 然后 使 用 自 
定义 图 数 keyInput0 来 获取 输入 框 内 容 并 更 新 data 值 ; 使 用 目 定义 函数 removeStorage() 获 取 
更 新 后 的 key 值 并 进行 判断 ,如果 为 空 则 提示 用 户 输 入 ,如果 不 为 空 则 调用 wx.removeStorage0 
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函数 进行 数据 的 异步 删除 。 

在 图 8-7 中 ， 图 (a) 是 删除 数据 前 调试 器 中 Storage 面板 的 效果 ， 用 户 可 以 使 用 前 面 8.2 
节 的 任意 例题 事先 存储 的 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 ;图 (b) 为 页 面 
初始 效果 ; 图 (c) 为 未 输入 KEY 名称 时 的 提示 效果 : 图 (d) 为 数据 删除 后 的 状态 ， 图 〈e) 
为 数据 删除 后 Storage 面板 的 效果 ， 由 该 图 可 见 指定 的 key 已 经 被 删除 。 


8.5.2 ”同步 删除 数据 


小 程序 使 用 wx.removeStorageSync(KEY) 从 本 地 绥 存 中 同步 删除 指定 KEY 名 称 和 对 应 的 
伍 ， 参 效 说 明 如 表 8-8 所 示 。 


表 8-8 wx.removeStorageSync(KEY) 的 参数 


多 豆包 
sy 在 中 提 定 的 key 


wx.removeStorageSync(KEY ) 不 例 代 人 码 格式 如 下 : 


- trv 1 
WX.IemoveStorageSync ("key'") 
} catch(e) 1{ 
/ /发 生 异 第 
} 


nN 


注意 : 引号 中 的 key 可 以 替换 为 实际 用 到 的 KEY 名 称 , try-catch 结构 也 可 以 省 略 不 写 。 


【 例 8-8】 数据 缓存 API 之 removeStorageSync 的 简单 应 用 
WXML (pages/demo04/removeStorageSync/removeStorageSync.wxml) 的 
代 人 码 厂 段 如 下 : 


-人 
.<view class='title'>4 .数据 删除 removeStorageSync 的 简单 应 用 < /view> 视频 讲解 


- <View Class=" demo—box'> 

<VlIeW class='title'>wx.removeStorageSync (KEY) 同步 删除 </view> 

<input name~="key" placeholder=" 请 输入 KEY 名 称 ' bindinput="kevyInput" /> 
<button type="pPrimary” bindtap="removeStorageSsync"> 数 据 删 除 </button> 

. </view> 


On 


本， 


JS (pages/demo04/removeStorageSync/removeStorageSync.js) 的 代 但 上 请 段 如 下 : 


To Pagell 

0 data: I 

ES | 

了 上 7 

本 人 keyInput: functionl(le) | 

6. this seELDalall kewv: edetail valne Ts 
让 }, 

二 removeStorageSync: function() I 
人 let key=this.data.keys 

10. if (kevy.length==0) { 

| 同 WwWX .ShowToasS 七 ({ 

7 title: 'KEY 不 能 为 空 ! '， 

1 3 - licon: “mone- 

14. }) 


I } else { 
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16。 WX .rTemoOoVveStorageSvync (kevy); 
ye wx.ShowToast (1{ 

18. title: "删除 完毕 ! '， 

下 lcon: “mone- 

20 - }) 

2 } 

二 .1 

3.1) 


运行 效 末 如 图 8-8 所 示 。 
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(e) 数据 删除 后 Storage 面板 的 效果 
图 8-8 数据 删除 removeStorageSync 的 简单 应 用 


【代码 说 明 】 
本 示例 在 removeStorageSync.wxml 中 设置 了 <input> 组 件 用 于 输入 KEY 名 称 ， 并 使 用 
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<button> 组 件 进 行 数 据 的 删除 。 在 removeStorageSync.js 的 data 属性 中 预 设 key 为 空 日 内 容 ; 
然后 使 用 目 定 义 函 数 keyInput0 来 获取 输入 框 内 容 并 更 新 data 值 ; 使 用 目 定 义 函 数 
removeStorageSync() 获 取 更 新 后 的 key 值 并 进行 判断 ， 如 果 为 空 则 提示 用 户 输 入 ， 如 果 不 为 
空 则 调用 wx.removeStorageSyncO 畏 数 进行 数据 的 同步 删除 。 

在 图 8-8 中 ， 图 (a) 是 删除 数据 前 调试 器 中 Storage 面板 的 效果 ， 用 户 可 以 使 用 前 面 8.2 
节 的 任意 例题 事先 存储 的 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 ; 图 (b) 为 页 面 
急 始 效 末 ; 图 (ce) 为 未 输入 KEY 名 称 时 的 提示 效果 ; 图 (d) 为 数据 删除 后 的 状态 ， 图 〈e) 
为 数据 删除 后 Storage 面板 的 效果 ， 由 该 图 可 见 指定 的 key 已 经 被 删除 。 


8.6.1 异步 清 宇 数据 


小 程序 使 用 wx.clearStorageO 弄 步 消 空 全 部 本 地 数据 缓存 ， 不 例 代 人 码 格式 如 下 : 


wiX.cCclearstorage () 


【 例 8-9】 数据 缓存 API 之 clearStorage 的 简单 应 用 
WXML (pages/demo05/clearStorage/clearStorage.wxml) 的 代码 片段 如 下 : 


- <VIeEw Class="'title'»o. 数据 清空 clearStorage 的 简 半 应 用 </view> 
-。 <VIiIeEw Class=" demo—box'> 

<view Class='title'>wx.clearStorage (KEY) 同步 清空 < /view> 视频 讲解 
< Input Pame= KeYyY” placeholder=" 请 输入 KEY 名 称 ， bindinput='keyInput" /> 
<button type="primary™" bindtap-="clearsStorage"> 数 据 消 空 </button> 
. </view> 


Ti 


JS (pages/demo0S/clearStorage/clearStorage.js) 的 代码 睛 段 如 下 : 


-Padge({ 
clearStorage: function(})} { 
wxX.clearStorage () : 
WX .ShowToasSt (1{ 
title: "数据 已 清空 ! '， 
1Con: “none 


}) 


‘DD 于 J] 


0 


运行 效果 如 图 8-9 所 示 。 
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(a) 数据 清空 前 Storage 面板 的 效果 
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图 8-9 数据 清空 clearStorage 的 简单 应 用 
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5. 数据 清空 clearSstorage 的 简单 应 用 5. 数据 清空 clearStorage 的 简单 应 用 


wx.clearSstorage 由 异步 清空 wx.clearStorage0 异 步 清空 


回 微 信 小 程序 开发 零 基础 入 门 局 微 信 小 程序 开发 检 基 础 入 门 


(Cb) 页 面 初始 效果 (c) 数据 清空 完成 


LR Console Sources Network Security Audits Storage AppData Wxml Sensor Trace 
过 滤 .… 


Key Value 


Cd) 数据 清空 后 Storage 面板 的 效果 
图 8-9 ( 续 ) 


【 代 但 说 明 】 

本 示例 在 clearStorage.wxml 中 设置 了 =button> 组 件 进行 数据 的 清空 。 在 clearStorage.js 中 
使 用 目 定义 函数 clearStorage0 进 行 本 地 缓存 数据 的 弄 步 消 空 ， 开 给 出 提示 语句 。 

在 图 8-9 中 ， 图 (a) 是 清空 数据 前 调试 右 中 Storage 面板 的 效果 ， 用 户 可 以 使 用 前 面 8.2 
节 的 任意 例题 事先 存储 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 ， 图 (b) 为 页 面 初 
始 效果 : 图 (c) 为 数据 清空 后 的 状态 ， 图 (d) 为 数据 清空 后 Storage 面板 的 效果 ， 由 该 图 可 
见 所 有 数据 均 已 被 消 空 。 


8.6.2 ”同步 请 衬 数 据 
小 程序 使 用 wx.clearStorageSync0 同 步 清空 全 部 本 地 数据 缓存 ， 示 例 代码 格式 如 下 : 


- Trwv 1{ 
wx.ClearSstorageSsSync () 
} catch(e) 1{ 


// 友 生 开 各 
} 


习 La fo 畏 


Cn 


在 上 述 代码 中 try-catch 结构 也 可 以 省 略 不 写 。 
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【 例 8-10】 数据 缓存 API 之 clearStorageSynec 的 简单 应 用 
WXML (pages/demo05/clearStorageSync/clearStorageSync.wxml)》 的 代码 
片段 如 下 : WR 


. <view class='"'title'>5 .数据 清 宇 clearStorageSync 的 简单 应 用 </view> 

- <View Class="demo—box'> 

<View Class='title'>wx.ClearSstorageSync  () 同步 清空 </view> 

<button type=" primary™ binadtap="clearStoragdeSync"> 数 据 清 空 </putton> 
- < /View> 


中 


JS (pages/demo0S/clearStorageSync/clearStorageSync.js) 的 代码 请 段 如 下 : 


- Page (({ 
clearSstorageSync: function() I 
wx.CclearStorageSync (1) 7 
WwWX .ShowIoas 七 ({ 
title: ' 数 据 已 清空 ! ' ， 
lcon: ‘none'" 
}) 
} 
}) 


运行 效果 如 图 8-10 所 示 。 
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(a) 数据 清空 前 Storage 面板 的 效果 
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5. 数据 清 宅 clearStorageSync 的 简单 应 用 5. 教 据 清 室 clearstoragesync 的 简单 应 用 


WElearstoraoeasywncn 同 步 清空 wx clearSstoragesync0 同 步 症 空 


已 栅 人 小 程序 开 惟 才 昌 到 Er 


Cb) 页 面 初 始 效 末 (Cc) 数据 清 宇 完 成 
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(d) 数据 清空 后 Storage 面板 的 效果 


图 8-10 ”数据 清空 clearStorageSync 的 简单 应 用 


【代码 说 明 】 

本 示例 在 clearStorageSync.wxml] 中 设置 了 <button> 组 件 进行 数据 的 清空 。 在 
clearStorageSync.js 中 使 用 目 定义 函数 clearStorageSync0O 进 行 本 地 缓存 数据 的 同步 消 容 ， 并 给 
出 提示 语句 。 

在 图 8-10 中 ， 图 (a) 是 清空 数据 前 调试 融 中 Storage 面板 的 效果 ， 用 户 可 以 使 用 前 面 
8.2 节 的 任意 例题 事先 存储 的 数据 ， 也 可 以 直接 在 Storage 面板 中 手动 输入 数据 : 图 (b) 为 
页 面 初始 效果 ; 图 (c) 为 数据 清空 后 的 状态 ; 图 (d) 为 数据 清空 后 Storage 面板 的 效果 ， 由 
该 图 可 见 所 有 数据 均 已 被 清空 。 


位 置 API 


本 章 主 要 介绍 小 程序 位 置 API 的 相关 知识 ， 包 括 如 何 获取 位 置 、 查 看 位 置 ， 以 及 通过 地 
站 WS 位 置 移 动 、 动 画 标 记 、 视 野 缩放 等 功能 


。 理解 经 纬度 坐标 的 含义 ; 
e。 了 解 坐标 类 型 wgs84 和 gcj02 的 区 别 ; 
。 掌握 获取 位 置 的 接口 的 使 用 方法 ; 


e 掌握 查看 位 置 的 接口 的 使 用 方法 ;: 
e。 等 握 地 图 组 件 控制 的 系列 接口 的 使 用 方法 。 


9.1.1 经 纬度 坐标 


经 纬度 是 由 经 度 和 纬度 组 成 的 坐标 系统 ， 又 称 为 地 理 坐 标 系统 ， 它 利用 三 维 空间 的 球面 
定义 地 球 上 的 任意 角落 。 其 中 的 经 线 和 纬 线 都 是 人 关 为 度量 方便 目 定 义 的 辅助 线 。 经 线 又 称 
为 子午 线 ， 有 是 连接 地 球 十 北 两 极 的 半圆 弧 ， 指 示 南 北方 同 ; 纬 线 被 定义 为 地 球 表面 上 的 杂 点 
随地 球 日 转 形成 的 轨迹 ， 每 两 根 纬 线 之 间 均 为 两 两 平行 的 圆 形 ， 指 示 东 西方 同 。 

例如 北京 市 东城 区 的 故宫 博物 院 ， 其 经 度 为 39.915390， 纬 度 为 116.397040。 


9.1.2 ”坐标 的 类 别 


由 于 测量 工作 都 需要 有 一 个 特定 的 坐标 系 作为 基准 ， 因 此 国内 外 有 各 目的 测量 基准 和 坐 
标 系 。 小 程序 使 用 的 坐标 类 型 有 两 种 ， 即 wgs84 坐标 和 gcj02 坐标 ， 且 微 信 web 开发 者 工具 
目前 仅 文 持 gcj02 坐标 。 

wgs84 

wegs84 的 全 称 是 World Geodetic System 1984， 它 是 美国 国防 局 为 GPS (Global Position 
System， 全 球 定 位 系统 ) 在 1984 年 建立 的 一 种 地 心 坐 标 系 统 ， 其 数据 来 源 于 遇 布 世界 的 卫星 
观测 站 所 获得 的 坐标 。 该 系统 初始 的 精确 度 为 1 一 2m， 后 经 历 了 多 次 修正 ， 目 前 用 的 是 2002 
年 1 月 20 日 正式 局 动 的 wgs84 (G1150) 版 本 ， 其 中 G 表示 使 用 GPS 测量 得 到 的 数据 ，1150 
指 的 是 GPS 时 间 的 第 1150 个 周 。 

gcj02 

gcj02 的 中 文 名 称 是 “国家 测量 局 02 号 标准 ”， 它 是 一 种 由 中 国 国家 测量 局 定制 的 地 理 


微 信 小 程序 开发 零 基础 入 门 志 


信息 系统 的 坐标 系统 。gcj 是 一 种 缩写 形式 , 由 3 个 词 的 拼音 首 字 母 组 成 , 其 中 g 指 的 是 guojia 
(国家 )、ec 指 的 是 cehui〈 测 绘 )、j 指 的 是 ju (局 )。 这 是 一 种 加 入 随机 偏 达 后 形成 的 对 经 纬 
度数 据 的 加 密 算 法 ， 几 是 国内 出 版 的 各 种 地 图 系统 都 必须 至 少 采 用 该 算法 对 地 理 位 置 数 据 进 
行 首 次 加 密 。 


9.2.1 获取 位 置 


小 程序 使 用 wx.getLocation(OBJECT) 获 取 当 前 设备 的 地 理 人 位置、 速度 等 信息 。 当 用 户 离 
开 小 程序 后 ， 此 接口 无 法 调用 ; 当 用 户 单 击 “ 显 示 在 聊天 顶部” 时， 此 接口 可 继续 调用 。 
其 OBJECT 参数 说 明 如 表 9-1 所 示 。 


表 9-1 wx.getLocation(OBJECT) 的 参数 
参数 最 低 版 本 
默认 为 wgs84 返回 gps 坐标 ，gcj02 返回 可 用 于 
wx.openLocation 的 坐标 


type String 合 


不 ”| 传 入 tme 会 返回 高 度 信息 ， 由 于 获取 高 度 需要 较 高 的 精 
ee “| 确 度 ， 会 减 慢 接口 返回 的 速度 
success() 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 


completeO 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


1.6.0 


success0 回 调 函 数 返回 的 参数 如 下 。 

。 latitude: 纬度 ， 泽 点数 ， 拖 围 为 -90 一 90， 负 数 表 示 南 纬 。 

e longitude: 经 有 度 ， 疗 点 数 ， 汇 围 为 -180 一 180， 人 负数 表示 西 经 。 

e speed: 速度 ， 浮 点 数 ， 单 位 为 m/s。 

se accuracy: 位 置 的 精确 度 。 

altitude: 高 度 ， 单 位 为 m。 

。 verticalAccuracy: 垂直 精度 ， 单 位 为 m (Android 无 法 获取 ， 返 回 0) 。 
。 horizontalAccuracy: 水 平 精 上 度 ， 单 位 为 m。 


注意 : altitude、verticalAccuracy 以 及 horizontalAccuracy 需要 1.2.0 及 以 上 版 本 支持 。 


wx.getLocation(OBJECT) 示 例 代 码 格 式 如 下 : 


1. wx.getLocationl(t 

这 type: wogs84°", 

3 SUCCESS: function(res}) 1{ 

4. Var latitude=res.l1atitude 
he var longitude=res.1ongitude 
本 二 varSpeed Tes speed 

Te Var accuracy=res.accuracy 
8. } 

-2 


【 例 9-1】 位 置 API 之 getLocation 的 简单 应 用 
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WXML (pages/demo01/getLocation/getLocation.wxml) 的 代码 请 段 如 下 : 


1. <view class='title7>1l1 .获取 位 站 getLocation 的 简单 应 用 </view> 
2. <View Class="'demo—box'> 
3. <view Class='title'>wx.getLocation (OBJECT) </view> 


4. <map latitude="'{{lat}}" longitude="'{{lon}}'></map> 

= <button type=" primary™ bindtap="getLocation"> 获 取 位 置 < /button> 视频 讲解 
6 - <view class='title> 纬 度 ， {{lat}}</view> 

ut <view Class='tit1le > 经 度 :， {{1lon}}</view> 

8 . <wYiewclass=rtatle' 种 度 ，11sDeed 辣 ms<iews> 


号 < LeW Class='title" > 精确 度 : {{accuracy} }</view> 
10.</view> 


JS (pages/demo01l/getLocation/getLocation.js) 的 代 但 上 请 段 如 下 : 


1. Page (lt{ 

i getLocation: function()t 

号 var that=this; 

1 wxX.getLocationt(l! 

Ee Success: function(res) 1 
6. that.setDatalt{t 

这 2 lat:res.l1latitude, 

时 lon: res.1Longitude, 
> Ee 

10. ACCUIAaCY : TeS-aCCUTaCY 
0 }) 

Ls } 

Le }) 

14. 1} 

1 和 


运行 效果 如 图 9-1 所 示 。 
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WxgetLocation(QBJECT) wx.getLocation(QBJECT) 


死 面市 本 一 于 


| mi 证 本 二 二 站 站 下 Ar 自 疡 下 下 
伟 码 小 实验 " 要 获取 你 的 地 理性 备 ， 
— ke 好 


取消 确定 


纬度 : 纬度 : 31.35246 

经 度 : 经 度 : 118.43313 
速度 : rs 速度 : -1mys 
精确 度 : 精确 度 : 65 
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(a) 页 面 初始 效果 Cb) 用户 授权 提示 C0) 位 置 获 取 效果 
图 9-1 获取 位 置 getLocation 的 简单 应 


【 代码 说 明 】 
本 示例 getLocation.wxml 中 的 <map> 组 件 用 于 显示 地 图 , <button> 组 件 用 于 单 击 获取 位 置 
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数据 ，4 个 <view> 组 件 分 别 用 于 显示 获取 到 的 纬度 、 经 度 、 速 度 和 精确 度 。 在 getLocation .js 
中 使 用 目 定 义 函 数 getLocation0 获 取 当 前 设备 的 位 置信 息 ， 并 调用 setData0 方 法 洽 染 到 
getLocation.wxml 页 面 上 。 

在 图 9-1 中 , 图 (a) 为 页 面 初始 效果 ， 此 时 尚未 获取 数据 ， 因 此 地 图 是 空白 一 片 ; 图 (b) 
为 自 钦 使 用 时 的 用 尸 授权 提示 ; (c) 为 获取 位 置 后 的 效果 ， 由 该 图 可 见 成 功 获取 到 了 相关 
数据 ， 并 且 使 用 经 纬度 数据 更 新 了 地 图 画面 。 


9.2.2 ”选择 位 置 


小 程序 使 用 wx.chooseLocation(OBJECT 打 开 地 图 选择 位 置 ， 该 接口 需要 用 户 授 权 
scope.userLocation。 其 OBJECT 参数 说 明 如 表 9-2 所 示 。 


表 9-2 wx.chooseLocation(OBJECT) 的 参数 
参数 说 明 
success() 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 
completeO) Fuction | 否 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 ) 


successO 回 调 函 数 返 回 的 参数 如 下 。 

name: 位 置 名 称 。 

address: 评 细 地 址 。 

latitude: 纬度 ， 浮 点 数 ， 范 围 为 -90 一 90， 负 数 表 示 丙 纬 。 
longitude: 经 度 ， 浮 点 数 ， 泄 围 为 -180 一 180， 负 数 表 示 四 经 。 
wx.chooseLocation(OBJECT) 示 例 代 码 格 式 如 下 : 


站 LL 


| 


| 


1 . wx.chooseLocationt(ti 

这 Success: functionl(res} 1 

二。 Var Pmame=Tes .nmame 

4 。 Var address=res .address 

i Var latitude=res.l1latitude 
6. Var longitude=res.1longitude 
7. } 

8. 1}) 


【 例 9-2】 位 置 API 之 chooseLocation 的 简单 应 用 
WXML (pages/demo01/chooseLocation/chooseLocation.wxml) 的 代码 卢 段 如 下 : 


.<view class='title>1l. 获 取 人 位置 chooseLocation 的 简单 应 用 </view> 

. <View Cass= qdemo 一 DoX > 

<View Class='title'>wx.chooseLocation (OBJECT </view> 

<map latitude="{{lat}}" longitude="{{lon}}'></map> 

<button type—"primary” bindtap-"chooseLocation"> 选 择 位 置 </button> 
<view class='title'> 名 称 : { {name}}</view> 

<view Class='title'> 地 址 : {Tadgdressl1l</views 

<view class='title'> 纬 度 : {{1latll}</view> 

<view Class='title'>»> 经 度 ; {{lonll</view> 

0 .</view> 


视频 讲解 


i 


JS (pages/demo01l/chooseLocation/chooseLocation.js) 的 代 但 户 段 如 下 : 


1 。 Page ll 
六 chooseLocation: Lunction() 1 
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a var that=this; 
和 4- WX .ChooseLocatLon (1{ 
2 SUCCeSS: function(res) I 


c that.setDatal(t 

We name: res.name, 

8 . address: res.address, 
ye lat: res.latitude, 
10. lon: res.longitude 
i }) 

LT } 

i }) 

T1400 7 

12.1) 


ww 


运行 效 末 如 图 9-2 所 示 。 
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例 则 DEMO 刘 生 下 
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wx.chooseLocation(OBJECT) wx.chooseLocation(OQBJECT) 


党 
是 航 Hi 出 
场 


苇 和 路 
ji “二 二]| 旺 抽 毕 合 
= 
A 腾讯 地 图 | 


| 兆 通 -大 观 花园 

名 称 : 
地 址 : 
纬度 : 
经 度 : 


葛 湖 市 中 吕 公 园 


PR ET i FA 
妇 证 洒 湖 BE | BT Fi | = | Hy | 处 


名 称 : 芜湖 市 中 央 公 园 


地 址 ; 安徽 省 芜湖 市 坞 江 区 政务 新 区 中 江 
大 道 与 仁和 路 交汇 处 


纬度 : 31.35089 
经 度 : 118.43302 


市 政务 区 化 中 心 
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(c) 位 置 选择 效果 


(a) 页 面 初始 效果 


9-2 获取 位 置 chooseLocation 的 简单 应 用 


【代码 说 明 】 

本 示例 chooseLocation.wxml 中 的 <map> 组 件 用 于 显示 地 图 ，<button= 组 件 用 于 单 击 获取 
位 置 数 据 ，4 个 <view> 组 件 分 别 用 于 显示 获取 到 的 名 称 、 地 址 、 续 度 和 经 度 。 在 
chooseLocation.js 中 使 用 目 定 义 图 数 chooseLocation() 选 择 位 置信 息 ， 并 调用 setData0) 方 法 这 
浅 到 chooseLocation .wxml 页 和 上。 

在 图 9-2 中 , 图 (a) 为 页 面 初始 效果 ,此 时 尚未 获取 数据 ， 因 此 地 图 是 空白 一 片 ; 图 (b) 
为 单 击 “ 选 择 位 置 ” 按 钮 弹出 位 置 选 择 套 的 画面 ， 此 时 有 用户 可 以 在 地 图 列表 中 选择 目 己 责 要 
的 地 址 ; 图 (c) 为 位 置 确定 后 的 效果 ， 由 访 图 可 见 成 功 获 取 到 了 相关 数据 ， 并 且 使 用 经 纬度 
数据 更 新 了 地 图 画面 。 


O09.3 查看 位置 | 


小 程序 使 用 wx-openLocation(OBJECT) 打 开 做 信和 内 是 地 图 但 看 位 置 ， 衣 接 口 需要 用 己 授 
权 scope.userLocation。 其 OBJECT 参数 说 明 如 表 9-3 所 示 。 
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表 9-3 wx.openLocation(OBJECT) 的 参数 

参数 说 明 
区 
longitude 0 经 度 ， 范 围 为 -180 一 180， 负 数 表示 西 经 
scale 1 缩放 比例 ， 范 围 为 S 一 18， 默 认为 18 
name String 位 置 名 
address Ss 地 址 的 评 细 说 明 
success() i 接口 调用 成 功 的 回调 函数 
G0 | Fcion | 再 | 接口 出 用 失败 的 加 说 郧 玫 
completeO Function | 否 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


wx.openLocation(OBJECT) 示 例 代 人 格式 如 下 : 


Pi| A 


和 


I 


| 


划 


1. wx.getLocationl(t 

2. type: 'gcj02'，// 返 回 可 以 用 于 wx .openLocationr) 的 经 纬度 
3 SucCcess: functionl(lres)} 1 

4. Var latitude=res.l1latitude 
Us Var longitude=res.1longitude 
6 wxX.openLocationlt 

i latitude: latitude, 

3: Jongitude: longitude 

= }) 

10. 1 

11.1}) 


【 例 9-3】 位 置 API 之 openLocation 的 简单 应 用 
WXML (pages/demo02/openLocation/openLocation wxml) 的 代 但 片段 
如 下 : 


. <view Class 二 "title">2 .查看 位 首 opPpenLocation 的 简单 应 用 </view> 
. <V1iew Cass= demo 一 boX > 

<View Class='title'>wzx.openLocation (OBJECT) </view> 
<button type="primary” bindtap=" openLocation"> 查 看 当前 位 置 </button> 
. </view> 


Ob 


JS (pages/demo02/openLocation/openLocation.js) 的 代码 上 请 段 如 下 : 


1. Page l(t{ 

a openLocation: function(} | 

区 WX .getLocationl(tl 

el type: 'gcj02'，// 返 回 可 以 用 于 wx .openLocation() 的 经 纬度 
Se SUCCeSS: function (res) I 


< var lat=res.1atitude 
Te Var lon=res.longitude 
Ws wWX -OPenLocat1Ion ({ 

过 latitude: lat, 

10. longitude: lon 

Le }) 

1 } 

Tn }) 

14. 1} 

1539y 


运行 效果 如 图 9-3 所 示 。 
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2. 查看 位 置 openLocation 的 简单 应 用 


wax.openLocation(OQBJECT) 


查看 当前 位 置 
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(b) 碍 


(a) 页 面 初始 效果 


看 当前 位 置 


图 9-3 ”获取 位 置 openLocation 的 简单 应 用 


【代码 说 明了】 

本 示例 在 openLocation.wxml 中 包含 了 <button> 组 件 ， 用 于 单 击 查 看 当前 位 置 。 在 
openLocation.js 中 使 用 目 定 义 图 数 openLocation0 实 现 如 下 功能 : 首先 调用 wx.getLocation() 
获取 当前 设备 位 置 的 经 纬度 ， 然 后 调用 wx.openLocation0 打 开 对 应 的 地 图 画面 。 

在 图 9-3 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 单 击 “ 查 看 当前 位 置 ” 按 钮 弹出 的 地 
图 画面 ， 访 页面 除了 可 以 查看 地 图 以 外 ， 还 可 以 但 看 周边 和 开局 导航 功能 。 


O59.4 地 图 组 控制 


9.4.1 获取 地 图 上 下 文 对 祭 


小 程 订 使 用 wx.createMapContext(mapId,this) 创 建 并 返回 地 图 上 下 文 对 象 mapContext， 
mapContext 通过 mapId 跟 WXML 页 面 上 的 <map> 组 件 绑 定 ,并 可 以 进一步 操作 对 应 的 <map> 
组 件 。 

例如 : 


To WAML 人 MN 
2. <map id='myMap'></map> 


ee 

2. ONnReady: Tunctiont(e) 1 

汉民 this.mapCtx=wx.createMapContext ("myMap '") 
J 


注意 : 如 果 不 使 用 自 定 义 组 件 ， wx.createMapContext(mapld,this) 的 参数 this 可 以 省 略 
不 与” 
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mapContext 对 象 包含 了 6 种 方法 用 于 操作 <map> 组 件 ， 其 方法 说 明 如 表 9-4 所 示 。 


表 9-4 mapContext 对 象 方法 
方法 参数 最 低 版 本 
获取 当前 地 图 中 心 的 经 纬度 , 返回 的 是 gcj02 坐标 


2etCenterLocation() OBJECT 和 可 以 opentocationl) 
moveToLocation() 无 将 地 国 心 移动 到 当 前 定位 点， 再 要 配合 <map> 

组 件 的 show-location 使 用 
translateMaiker0 平移 marker， 市 动画 120 
includePoints0 缩放 视野 展示 所 有 经 纬度 1.2.0 
getRegion0 获取 当前 地 图 的 视野 范围 1.4.0 
getScale0) 获取 当前 地 图 的 缩放 级 别 1.4.0 


说 明 : 上 述 方法 的 具体 使 用 将 在 9.4.2~9.4.7 节 进行 详细 介绍 。 
9.4.2 ”获取 地 图 中 心 坐标 


小 程序 使 用 getCenterLocation(OBJECT) 获 取 当 前 地 图 中 心 的 经 纬度 。 其 OBJECT 参数 说 


明 如 表 9-5 所 示 。 


表 9-5 getCenterLocation(OBJECT) 的 参数 
参数 说 明 
success() 接口 调用 成 功 的 回调 函数 ，res={ longitude: "经 上 度 ". latitude: "纬度 "} 
Bil0 接口 调用 失败 的 回调 函数 


complete0 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执行 ) 


【 例 9-4】 位 置 API 之 getCenterLocation 的 简单 应 用 
WXML (pages/demo03/getCenterLocation/getCenterLocation.wxml) 的 代 
但 放 段 如 下 : 


. <vVviewCclass='title'»>3. 地 图 组 件 控制 | getCenterLocation 的 简单 应 用 < /view> 视频 讲解 
- <View Class="demo—box'> 

<view Class='title'>mapCtx.getCenterLocation (OBJECT) </view> 

<map id='myMap'></map> 

<button type=" "primary” bindtap="getCenterLo cation"> 获 取 位 置 </button> 
<view Class='title> 纬 度 ， {flatl}ll}</view> 

<view Class='title > 经 度 ， {{lon}}</view> 

. </view> 


nn 


co ~] 


JS (pages/demo03/getCenterLocation/getCenterLocation.js) 的 代码 片段 如 下 : 


| 

getCenterLocation: function() I 
var that=this; 

4. this.mapCtx.getCenterLocationl(t! 
er SUcCcCcess:function (res)t 

6. that.setDatal(t 

es lat:res.l1atitude, 

有 Jon: Tes-. LonglItude 

J. 1 

10. } 

了 1 
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12. 上 

13. onReady: function() I 

14. this.mapCtx=wx.createMapContext ("myMap' ); 
有 

16.1) 


运行 效果 如 图 9-4 所 示 。 
wees WecChat 二 17:22 
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3. 地 图 组 件 控制 getCenterLocation 的 简单 应 
| 


3. 地 图 组 件 控制 getCenterLocation 的 简单 应 


mapCtx.getCenterLocation(OBJECT) mapCtx.getCenterLocation(OQBJECT) 


WE 
区 中 医 医 院 


了 
区 中 医 医院 ey On 
北京 朝阳 医院 国 结 洁 泽 园 


一 


纬度 : 


经 度 : 
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全 
北京 朝阳 医院 


= 


纬度 : 39.92 
经 度 : 116.46 
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(a) 页 面 初 始 效 示 (pb)》 获取 地 图 中 心 的 经 纬度 


图 9-4 地 图 组 件 控制 getCenterLocation 的 简单 应 用 


【代码 说 明 】 

本 示例 在 getCenterLocation.wxml 中 包含 了 =<map> 组 件 且 声明 id=myMap' 以 便 和 地 图 上 
下 文 进行 线 定 ， 在 地 图 下 方 使 用 <button> 组 件 用 于 早 击 租 看 地 图 中 心 的 经 纬度 ， 两 个 <view> 
用 于 显示 得 到 的 经 纬度 数据 。 在 getCenterLocation.js 中 使 用 目 定 义 图 数 getCenterLocation( 
实现 如 下 功能 : 首先 调用 this.mapCtx.getCenterLocation0 获 取 当 前 地 图 组 件 中 心 点 的 经 纬度 ， 
然后 使 用 setData0 方 法 将 经 纬度 数据 泻 染 到 getCenterLocation.wxml 上 。 

在 图 9-4 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 地 图 会 默认 显示 北京 地 区 ;: 图 (b) 为 单 击 
“获取 位 置 ”按钮 获取 经 第 度数 据 后 的 画面 ， 由 设 图 可 见 <map> 组 件 默 认 的 地 图 中 心 点 位 于 征 
度 39.92、 经 度 116.46 的 位 置 。 


9.4.3 ”移动 到 指定 位 置 


小 程序 使 用 moveIToLocation0 将 地 图 中 心 移动 到 当前 定位 点 ， 
<map> 组 件 的 show-location 使 用 。 

【 例 9-S】 位 置 API 之 moveToLocation 的 简单 应 用 视频 讲解 

WXML (pages/demo03/moveToLocation/moveToLocation.wxml)》 的 代 人 片段 如 下 : 


. <View class='title'>3. 地 图 组 件 控制 moveToLocation 的 简单 应 用 </view> 
<V1iew Class="'demo—box'> 
<view Class='title'>mapCtx.moveToLocation ()</view> 
<map id='myMap" latitude='31.350790" longitude='118.412190" show—location></map> 


必 Lu [oo 捕 


2 二 微 信 小 程序 开发 零 基础 入 门 志 y 


号 起 <button type=" "primary™ bindtap="moveToLocationn> 移 动 位 四 </button> 
6. </view> 


JS (pages/demo03/moveTIoLocationmoveIoLocation.js) 的 代码 上 斤 段 如 下 : 


1 。 Page({ 

二 moveToLocation: function() 
ER this.mapCtx.moveToLocation (); 
4. }, 

号 onReady: tunction() I 


this.mapCtx=wx.createMapContext ('myMap'); 


co 3] 
一 "一 


; 
运行 效 末 如 图 9-5 所 示 。 
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mapCtx.moveToLocation() 
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3. 地 图 组 件 控制 moveToLocation 的 简单 应 用 


mapCtx.moveToLocation() 


无 而 市 更 一 中 玫 
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(a) 页 面 初始 效果 (b) 移动 到 当前 定位 点 


图 9-5 ”地 图 组 件 控制 moveToLocation 的 简单 应 用 


【代码 说 明 】 

本 示例 在 moveToLocation.wxml 中 包含 了 <map> 组 件 且 声明 id='myMap' 以 便 和 地 图 上 下 
文 进行 绑 定 ， 在 地 图 下 方 使 用 <button> 组 件 用 于 早 击 移动 地 图 中 心 到 当前 定位 点 ， 同 时 为 
<map> 组 件 声 明 show-location 属性 用 于 显示 当前 定位 点 标记 ， 且 设置 了 初始 经 纬度 为 苑 湖 市 
雕塑 公园 (31.350790,118.412190)。 在 moveToLocation.js 中 使 用 目 定 义 图 数 moveToLocation() 
实现 定位 和 移动 功能 。 

在 图 9-5 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 地 图 会 默认 电 示 无 湖 市 雕塑 公 因 附近; 图 (b) 
为 早 击 “移动 位 置 ”按钮 移动 到 当前 定位 点 后 的 效 朱 ， 由 该 图 可 见 已经 成 功 移动 并 旺 示 了 当 
前 定位 点 的 图 标 。 


9.4.4 动画 平移 标记 


小 程序 使 用 translateMarker(OBJECT) 动 画 平 移 标 记 。 其 OBJECT 参数 说 明 如 表 9-6 所 示 。 
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表 9-6 translateMarker(OBJECT) 的 参数 


参数 说 明 
i 请 是 际 
destination 指定 标记 移动 到 的 目标 点 
autoR otate 移动 过 程 中 是 否 目 动 旋转 标记 
Totate 是 标记 的 旋转 角度 
duration 否 动画 持续 时 长 ， 默 认 值 为 1000ms， 平 移 与 旋转 分 别 计 算 
animationEnd() 否 动画 结束 的 回调 函数 
fail() 个 接口 调用 失败 的 回调 函数 


段 如 


1 
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【 例 9-6】 位 置 API 之 translateMarker 的 简单 应 用 
WXML (pages/demo03/translateMarker/translateMarker.wxml) 的 代码 厅 
下 : 


. <View class='title'>3. 地 图 组 件 控制 translateMarker 的 人 简 蛙 应 用 </view> 视频 讲解 


。 < 过 leW Class='demo—box'> 


<view class='title'>mapCtx.translateMarker (OBJECT) </view> 

<map id="myMap" latitude="{{lat}}" longitude="'{{lon}}" markers= 
'{ {markers}}'></map> 

<button type=" "primary” bindtap="translateMarker "> 平移 标记 </button> 


. </view> 


JS (pages/demo03/translateMarkertranslateMarkerjs) 的 代码 片段 如 下 : 


- Page (i{ 


data: I 

lat: 39.911940, 

Jon: 1il6.391140,， 

markers: |{ 
六 夺 宙 
latitude: 39.911810, 
Jongitude: 1l16.394800, 
iconPpath: '/images/demo03/1location.png', 
label: 1 


content: 5 故 训 博物院 ， 
} 
| 
ls 
translateMarker: function() { 
this.mapCtx.translateMarker(l! 
markerId: "001°", 
UtoRoLate: true, 
duration: 1000, 
destination: 1 
latitude: 393.91171940, 
lJongitude: ll6e.397140 
} 
}) 
bs 
onReady: function() { 
this.mapCtx=wx.createMapContext ('myMap');} 
} 
1) 


运行 效果 如 图 9-6 所 示 。 
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mapCtx.translateMarker(OQBJECT) 


国家 机 美 
3 大 管理 局 
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(a) 页 和 面 初始 效果 Cb》 平移 标记 


9-6 ”地 图 组 件 控制 translateMarker 的 简单 应 用 


【代码 说 明 】 

本 示例 在 translateMarkerwxml 中 包含 了 <map> 组 件 且 声 明 1d='myMap' 以 便 和 地 图 上 下 文 
进行 绑 定 ， 在 地 图 下 方 使 用 <button=> 组 件 用 于 平移 标记 。 在 translateMarkerjs 的 data 属性 中 
人 争 始 化 地 图 的 经 纬度 在 中 山 公 园 附近 (39.917940,116.397140)， 并 使 用 系 材 图 片 location.png 
在 该 位 置 旺 示 标 记 , 同时 使 用 目 定 义 疯 数 translateMarkerO 根 据 markerld 指定 需要 平移 的 标记 
并 移动 到 北京 故宫 博物 院 附近 〈39.917940,116.397140)， 其 动画 效果 持续 1 秒 钟 。 

在 图 9-6 中 ， 图 (a) 为 页 面 官 始 效率 ， 此 时 标记 显示 在 中 山 公 园 附 近 ; 图 (b) 为 单 击 “ 平 
移 标 记 ” 按 钮 平移 标记 后 的 画面 ， 由 该 图 可 见 标记 已 经 航 移 动 到 了 新 的 位 置 。 


9.4.5 ”展示 爹 部 坐标 


小 程序 使 用 includePoints(OBJECT) 展 示 所 有 指定 的 经 纬度 ， 必 要 时 会 央 放 视野 。 
其 OBJECT 参数 说 明 如 表 9-7 所 示 。 


表 9-7 includePoints(OBJECT) 的 参数 
说 。 明 
要 显示 在 可 视 区 域内 的 坐标 点 列表 ， 即 [fatitude, longitude}] 


参数 
里 才 坐标 点 形成 的 矩形 边缘 到 地 图 边缘 的 距离 ， 单 位 为 像素 。 其 格式 为 
否 


points 
padding [上 ,. 右 ,下 , 左 ]， 在 Android 上 只 能 识别 数组 的 第 一 项 ， 上 、 下 、 左 、 
右 的 padding 一 致 。 开 发 者 工具 和 暂 不 支持 padding 参数 


【 例 9-7】 位 置 API 之 includePoints 的 简单 应 用 
WXML (pages/demo03/includePoints/includePoints wxzml) 的 代码 卢 段 如 下 : 


-。 <VIiewclass=''title'»>3. 地 图 组 件 控 制 includePoints 的 简单 应 用 < /view> 
-。 <VIew Class="'demo—box'y> 
<view Class='title'>mapCtx.includePoints (OBJECT) </view> 


户 [o 请 


<map id='myMap'></map> 
<button type=" "primary” bindtap="includePoints™ > 展示 指定 经 纬度 </button> 


Cn 


‘DD 外 性 
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. </view> 


JS (pages/demo03/includePoints/includePoints.js) 的 代码 上 请 段 如 下 : 


Page ({ 
includePoints: function() 1 
this.mapCtx.includePointst(t{ 

padding: [10], 

points: [1{ 
/1 安徽 黄山 风景 区 
latitude: 30129590. 
longitude: 118.1 17143940 


， }， 1 
10 . /7 安徽 九 华 山 风 景区 
i latitude: 30-.471]110., 
1 longitude: 1l1/.804200 
13. } 
1 }) 
15. 上 
l6. onReady: function()} { 
Lo this.mapCtx=wx .createMapContext ('myMap' ); 
1 二 
13-.1) 


运行 效果 如 图 9-7 所 示 。 
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mapCtx.includePoints(OBJECT) mapCtx.includePoints{tOBJECT) 
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(a) 页 面 初 始 效果 (b) 展示 指定 经 纬度 
图 9-7 地 图 组 件 探 制 includePoints 的 简单 应 用 
【代码 说 明 】 
本 示例 在 includePoints.wxml 中 包含 了 <map> 组 件 且 声明 1d='myMap' 以 便 和 地 图 上 下 文 


进行 绑 定 ， 在 地 图 下 方 使 用 <button> 组 件 用 于 展示 指定 经 纬度 。 在 includePoints.js 中 使 用 自 
定义 图 数 includePoints 指定 了 两 个 经 纬度 地 上 点， 分 别 是 安徽 黄山 风景 区 (30.129590， 
118.174940) 和 安徽 九 华 山 风 景区 (30.471110, 117.804250)。 
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图 9-7 (a) 为 页 和 面 初始 效果 ， 此 时 地 图 会 默认 显示 为 北 泵 地 区 ; 图 9-7 〈b) 为 反击 按钮 
展示 指定 经 纬度 后 的 画面 ， 由 图 可 见 由 于 地 理 位 置 跨度 较 大 显示 了 黄山 区 《黄山 所 在 地 区 ) 
和 池州 市 〈 九 华山 所 在 地 区 )。 


9.4.6 ”多 取 视 野花 围 
小 程序 使 用 geRegion(OBJECT) 获 取 当 前 地 图 的 视野 范围 ， 其 OBJECT 参数 如 表 9-8 所 示 。 


表 9-8 getRegion (OBJECT) 的 参数 
参数 说 明 


二 接口 调用 成 功 的 回调 图 数 ，res={fsouthwest northeasty ， 即 西南 和 角 与 
success() Function 所 东北 角 的 经 纬度 


failO 接口 调用 失败 的 回调 函数 


a 搂 中 调用 结束 的 同调 丽 双 《调用 成 功 与 于 各 执行》 
【 例 9-8】 位 置 API 之 getRegion 的 简单 应 用 
WXMIL (pages/demo03/getReglion/getRegion.wxml) 的 代码 片段 如 下 : 


. <view class='title'>3. 地 图 组 件 控制 getRegion 的 简单 应 用 </view> 
- <View CasSSs= aemo 一 DO > 


<View Cclass='title'>mapCtx.getRegion (OBJECT) </view> 
<map id="'myMap'></map> 
<button type="primary” bindtap="getRegion"> 锋 取 视 野 范 围 </button> 


. </view> 


i 


JS (pages/demo03/getRegion/getRegion.js) 的 代码 片段 如 下 : 


1. Page lt! 

a getRegion: function(}) I 
也- this.mapCtx.getRegionlt{ 
4. SUCCeSS :function (el) { 
是 站 Console.l1og(e) 

6. } 

WW }) 

Ce } ， 

onReady: function() 1{ 

10. this.mapCtx=wx.createMapContext ('myMap' ); 
Ls 

12=1) 


运行 效果 如 图 9-8 所 示 。 

【代码 说 明 】 

本 示例 在 getRegion.wxml 中 包含 了 <map> 组 件 且 声明 id=myMap' 以 便 和 地 图 上 下 文 进行 
绑 定 ， 在 地 图 下 方 使 用 <button> 组 件 用 于 单 击 得 看 地 图 视 时 范围 。 在 getRegion.js 中 使 用 目 定 
义 图 数 getReglon() 实 现 如 下 功能 : 首先 调用 this.mapCtx.getRegion0 获 取 当 前 地 图 的 northeast 
和 southwest 两 个 点 的 经 纬度 ， 然 后 将 结果 打印 输出 到 控制 台 上 。 

在 图 9-8 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 地 图 会 默认 显示 北京 地 区 ; 图 (b) 为 单 击 
“获取 视野 范围 ”按钮 后 的 画面 ,由 该 图 可 见 已 经 成 功 获取 到 了 默认 地 图 区 域 的 视野 范围 数据 。 
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第 9 章 位 置 API 
3. 地 图 组 件 控制 getRedgicn 的 简单 应 用 


mapCtx.getRegion(OQBJECT) 


Wr E 
区 中 医 医 院 全 上 
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(a) 页 面 初始 效果 


Console Sources Network Security Audits Storage AppData Wxml Sensor 
™ Filter Default levels 了 


vf{errMsg: "getMapRegion:ok", southwest;: 1.}, northeast;: 1..}} 


errMse: "getMapRegion:ok" 
bnortheast: {longitude: 116.4742478942871, latitude: 39.926582392689584} 
Pb southwest: {longitude: 116.44575218571288, latitude: 39.91341697458766} 
pb proto : Object 


> | 
(b》Console 控制 台 获 取 地 图 视野 用 围 
图 9-8 ”地 图 组 件 控制 getRegion 的 简单 应 用 


9.4.7 ”获取 地 图 缩放 级 别 
小 程序 使 用 getScale(OBJECT) 获 取 当 前 地 图 的 缩放 级 别 , 其 OBJECT 参数 如 表 9-9 所 示 。 


表 9-9 ”getScale(OBJECT) 的 参数 
参数 说 了 明 
Success 人) 接口 调用 成 功 的 回调 函数 ，res={scale} 
fail() 接口 调用 失败 的 回调 函数 


complete() 接口 调用 结束 的 回调 函数 (调用 成 功 与 吾 部 执行 ) 


【 例 9-9】 位 置 API 之 getScale 的 徊 日 应 用 


WXMI (pages/demo03/getScale/getScale.wxml) 的 代码 请 段 如 下 : 


<VLIeW Class='title'>3. 地 图 组 件 控制 getScale 的 简单 应 用 </view> 四 
<VTLeW Class="demo box'> i 
<View class='"'title'>mapCtx.getScale (OBJECT) </view> 视频 讲解 


<map id='myMap'></map> 

<button type="primary"” bindtap="getScale"> 医 取 绵 放 级 别 </button> 
<Vliew Class="'title' > 缩放 级 别 : {fscale}l}</view> 

. </view> 


下 


JS (pages/demo03/getScale/sgetScale.js) 的 代码 片段 如 下 : 
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1 Page l(t{ 

We IJetSscale: functiont() 1 

3 var that=this; 

4. this.mapCtx.getSscale (li 

与 Success: function (res} 1 

6 let scale=res.scale; 
that.setData({scale:scalel}) 
8 


- } 
a }) 
10. 上 
11- onReady: functiont(} { 
1 this.mapCtx=wx -CIeateMapPConteXxt ( myYMapPp  ) 
| es 
14.}) 


运行 效 末 如 图 9-9 所 示 。 


10:12 生生 重生 本 eC hat 全 10:13 
例 晤 DEMO =" 例题 DEMO 
第 9 章 位 置 API 第 9 章 位 置 API 
3. 地 图 组 件 控制 getscale 的 简单 应 用 3. 地 图 组 件 控制 getScale 的 简单 应 用 


mapCtx.getscale(OBJECT) mapCtx.getScale(OBJECT) 


We b We 区 _ 
区 中 区 医院 加 区 中 医 医院 | 
北京 朝阳 医院 北京 朝阳 医院 
ss 


= 


缩放 级 别 : 14 
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(a) 页 面 初始 效果 (b) 获取 地 图 缩放 级 别 
图 9-9 地 图 组 件 控制 getScale 的 简单 应 用 


【 代 公 说 明 】 

本 示例 在 getScale.wxml 中 包含 <map> 组 件 且 声明 1d='"myMap'，<button> 组 件 用 于 早 击 
查看 地 图 缩放 级 别 ，<view> 用 于 显示 查 到 的 地 图 缩放 级 别 。 在 getScalejs 中 使 用 自 定义 函数 
getScaleO 〇 实现 如 下 功能 : 首先 调用 this.mapCtx.getScale0O 获 取 当 前 地 图 放 级 别 ， 人 然后 使 用 
setData0 方 法 将 数据 泻 染 到 getScale.wxml 上 。 

在 图 9-9 中 ， (a) 为 页 面 初始 效果 ， 此 时 地 图 会 默认 显示 北京 地 区 : (b) 为 单 击 
“获取 缩放 级 别 ” 按 钮 后 的 了 画面， 由 该 图 可 见 <map> 组 件 默 认 的 地 图 挥 放 级 别 是 14 级 。 


本 章 主 要 介绍 小 程序 设备 API 的 相关 知识 ， 包 括 系统 信息 、 网 络 、 传 感 占 、 用 户 行为 和 
A a 


掌握 系统 信息 获取 和 兼容 性 判断 的 接口 用 法 ; 
掌握 网 络 状 态 和 Wi-Fi 管理 的 接口 用 法 : 
掌握 罗盘 和 加 速度 计 的 接口 用 法 ; 


掌握 用 户 截屏 、 扫 码 、 剪 切 / 粘 贴 和 通话 的 接口 用 法 ; 
掌握 手机 内 存 、 屏 幕 亮度 和 振动 管理 的 接口 用 法 。 


10.1.1 ”多 取 系统 信息 


异步 获取 
小 程序 使 用 wx-.getSystemInfo(OBJECT) 开 步 获 取 系 统 信息 ， 其 OBJECT 参数 如 表 10-1 


所 示 。 


参 


10-1 as (OBJECT) 的 参数 


数 说 阴 


Pi 


success0 7 接口 调用 成 功 的 回调 函数 
fail0 Function | 否 | 接口 调用 失败 的 回调 函数 


complete0 | Function |  ” 否 | 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 会 执行 ) 
其 中 successO 回 调 参 数 如 下 。 


区 


功 


brand: 手机 品牌 ，1.5.0 版 本 以 上 支持 。 

model: 手机 型 号 

pixelRatio: 设备 像 辫 比 。 

screenWidth 和 screenHeight: 屏幕 宽度 和 高 度 ，1.1.0 版 本 以 上 文 持 。 
windowWidth 和 windowHeight: 可 使 用 窗口 宽度 和 高 度 。 
statusBarHeight: 状态 栏 的 高 度 ，1.9.0 版 本 以 上 文 持 。 

laneuage: 微 信人 设置 的 语言 。 

version: 短信 版 本 号 。 

system: 操作 系统 版 本 。 
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e platform: 各 户 六 平台 。 
。 fontSizeSetting: 用 户 字 体 大 小 设置 ， 以 “我 一 议 症 一 通用 一 字体 大 小 ”中 的 设置 为 准 ， 
单位 为 pxX，1.$.0 版 本 以 上 文 持 。 
e SDKVersion: 客户 站 基础 库 版 本 ，1.1.0 版 本 以 上 支持 。 
园 同步 获取 
小 程序 使 用 wx.getSystemInfoSync(OBJECT) 同步 儿 取 系统 信息 ， 其 
OBJECT 参数 和 异步 获取 的 successO 回 调 参数 完全 相同 。 
【 例 10-1】 设备 API 之 获取 系统 信息 的 简单 应 用 


视频 讲解 WXMI (pages/demo01/sgetSysInfo/getSysInfo_wxml) 的 代码 片段 如 下 : 
1. <view class='title'>]1 .系统 信息 < /view> 
二。 <VIiew Class='demo—box'> 
3 <view class='title'> 获 取 系 统 信息 </view> 
4. <button type="pPrimary™ Size="mini' bindtap="getSsysInfo"> 异 步 查 询 </button> 
| <button type=" primary Size="mni" DiIndtap= getSysIntoSYyncC > 同步 查询 </button> 
6. <button type=" "primary” SizZe= "mini’ bindtap="resetn> 清 空 结果 </button> 
村 <Vliew Cass= 七 1 七 人- > 于 机 品牌 ; {{fFes-prandl }</view> 
38. <view class='title'> 玫 机 型 号 : {{res.model}l}</view> 
这 <view class='title'> 操 作 系 统 : {{res.system} }</view> 
10. <view class='title'> 客 尸 问 平台 : {{res.platform} }</view> 
11.</view> 


WXSS (pages/demo01/getSysInfo/getSysInfo.wxss〉 的 代码 片 段 如 下 : 


1 。 buttontf 
margin: lO0rpx; 


3. } 


JS (pages/demo01/getSysInfo/getSysInfo.js〉 的 代码 片段 如 下 : 


- Page (| 
// 措 步 获 取 系 统 信息 
getSysInfo: function() { 
Var that=this 
wxX.getSystemInfol(l{ 
Success: function (res) I 
that.setData({ res: res 1}) 
}, 
}) 
上 
// 同 步 获 取 系 统 信息 
getSysInfoSync: function() I{ 
let res=wx.getSystemInfoSsSync()} 
this.setDatal({ res: res 1}) 


中] 


‘OD 


PP 
JAAWNPO,' 
二 击 二 和 二 而 而 


上 

/ /清空 伍 询 结果 

reset: function() f{ 
18. this.setDatal({ res: 7 ， }) 
19. 1 
Dy 


运行 效 末 如 图 10-1 所 示 。 
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获取 系统 信息 获取 系统 信息 获取 系统 信息 


手机 品牌 : iPhone 手机 品牌 : devtools 


手机 品牌 : 
手机 型 号 : 手机 型 号 : iPhone 6s<iPhone8,1> 手机 型 号 : iPhone 6 
操作 系统 : 操作 系统 : iDS 11.4.1 操作 系统 : iDS 10.0.1 


Pe ” 端 平台 : devtools 
客户 端 平台 : 客户 端 平台 : ios 客户 端 平台 
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(a) 页 面 初始 效果 (b) 真 机 查询 结果 Cc) 开发 者 工具 模拟 结果 
图 10-1 获取 系统 信息 的 简单 应 用 


【代码 说 明 】 

本 示例 getSysInfo.wxml 中 的 3 个 <button> 组 件 分 别 用 于 异步 、 同 步 得 询 系统 信息 以 及 清 
空 结 果 ，4 个 <view> 组 件 分 别 用 于 显示 获取 的 手机 品牌 、 手 机 型 号 、 操 作 系 统 和 客户 新 平台 。 
在 getSysInfo.js 中 使 用 目 定 义 图 数 getSysInfo0 和 getSysInfoSync0O 分 别 弄 步 和 同步 获取 当前 设 
备 的 系统 信息 ， 并 调用 setData0 方 法 演 染 到 getSysInfo.wxml 页 面 上 。 

在 图 10-1 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 尚未 获取 数据 ， 图 (b) 为 真 机 查询 结果 ; 
图 (c) 为 开发 者 工具 模拟 结果 ， 由 该 图 可 见 均 成 功 获 取 到 了 相关 数据 。 


10.1.2 canlUse() 


小 程序 使 用 wx.canIUse(String) 判 断 小 程序 的 API、 回 调 、 参 数 、 组 件 等 是 否 在 当前 版 本 
可 用 ， 该 接口 从 基础 库 1.1.1 版 本 开始 文 持 。 

其 中 Strmg 参数 调用 有 两 种 形式 ， 即 $fIAPIH.$fmethod}.${param}.${foptions} 和 
${component}.$ {attribute}.${option}， 有 具体 说 明 如 下 。 

e $fAPIY: API 名 称 。 

eq$fmethod}: 调用 方式 ， 有 人 效 值 为 retum、success、object 或 callback。 

。${fparam}: 参数 或 返回 值 。 

e $foptions}: 参数 可 选 全。 

e。 9$fcomponenty: 组 件 名 宁 。 

。$fattribute}: 组 件 属 性 。 
$foption}: 组 件 属 性 的 可 选 全。 
参数 调用 示 红 如 下 : 


//$S{API} .S$ {method} .$ {param} .$ {options} 
wxX.CanlIUsel('openBluetoothAdapter') 
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wxX.CanlUse('getSsystemIlInfoSync.return.screenWidth")} 
WwX-CamnIUSE( getSystemIinfo.success.screenWidth") 
WwWX .CanIUSe( "ShowIoast .opbJ]Ject . Image ) 

WwWX-CanIUSEe( onCompasscChange.callback.direction’') 
WwWX-CanIUSe( ITeGuest -ob]ject .method.GET") 


//$S{component}.${attribute}.${option} 
wxX.CanlUse(" live-player') 
WX.CanlIUse('text.selectable') 
wxX.CanlUsel('button.open-—type.contact") 


【 例 10-2】 设备 API 之 canIUse 的 简单 应 用 


WXMIL (pages/demo01/canIUse/canIUse.wxml) 的 代码 片段 如 下 : 


ep 1. <view class='title'>1 .系统 信息 </view> 
2. <view Class="'demo—box'> 
馈 频 讲解 用 全 <view class='title'>canIUse 判断 </view> 
4. <input bindblur="inputBlur" placeholder=" 请 输入 需要 判断 的 内 容 '>< /input> 
ot <button type="primary” pindtap"canIUse"> 查 询 </button> 
6. <view Class='title'> 查 询 结 果 ， {fresult}}</view> 
1. </view> 


JS (pages/demo01/canIUse/canIUse.js〉 的 代 人 码 厂 段 如 下 : 


1 pagell 

a data: I 

= result: ' 符 查询" 

本 二 } ， 

5. // 初 始 化 输入 框 内 容 

6. nuUEMWaaT1UE 7 

7.  // 获 取 输 入 杠 内 容 

de inputBlur: function(e)} 1{ 

As this.inputVvalue=e.detail .value 
10. 


Ee 
11. // 查 询 兼容 性 


12。 canIUse: function() ff 


1 let txt=this.inputValue 

14. if (txt=="7") { 

下 WX .ShowToast ({ 

16. title: "输入 框 不 能 为 空 "， 

Li1. lcon: ‘none'" 

18. }) 

| 2 } else I 

0 - let result=wx.canlIUse (this.inputValue) 
1- this.setData({ result: (result > "二 - ' 不 支持 ') }) 
过 之 - } 

3 -| 

4.1}) 


运行 效果 如 图 10-2 所 示 。 
【代码 说 明 】 


本 示例 canIUse.wxml 中 的 <input> 输 入 杠 用 于 输入 判断 内 容 ，<button> 组 件 用 于 单 击 查询 
莱 容 性 ，<view> 组 件 用 于 显示 但 询 结果 是 否 文 持 。 在 canIUse.js 的 data 中 初始 化 得 询 结果 为 
住 占 


“ 待 查询 ”， 且 定义 页 面 变 量 inputValue 用 于 更 新 输入 框 内 容 。 当 输入 框 失 去 


二 


， 


时 使 用 自 定 


义 函 数 inputBlur0 更 新 inputValue 的 值 。 当 单 击 “查询 ”按钮 时 触发 自 定义 函数 canIUse0 判 
断 输 入 框 是 否 为 室 ， 如 果 不 为 空 则 进行 兼容 性 检测 并 调用 setData0 方 法 泻 染 到 canTUse wxml 
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1. 系统 信息 1. 系统 信息 1. 系统 信息 


canIUse 判 | 断 canIUse 判 断 canIUse 判 断 


请 输入 需要 判断 的 内 容 请 输入 需要 判断 的 内 容 button.open-type 


查询 结果 : 待 查询 要 询 疆 里 ， 待 盏 记 查询 结果 : 支持 
性 入 框 不 能 为 衬 


书 微 信 小 程序 开发 零 基础 入 门 古 微 信 小 程序 开发 零 基础 入 门 


(a) 页 面 初始 效果 (b) 未 输入 内 容 的 提示 (c) 查询 结果 反馈 
图 10-2 ”canlUse 的 简单 应 用 
在 图 10-2 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 是 待 查询 状态 ; 图 (b) 为 尚未 输入 任何 内 
容 的 铅 误 提 示 ; 图 (ec) 为 得 询 结果 ， 由 访 图 可 见 button.open-type 在 当前 姑 和 省 可 用 。 有 用户 还 
可 以 目 行 输入 接口 或 组 件 内 容 进行 判断 。 


10.2.1 网络 状 态 


获取 网 络 类 型 
小 程序 使 用 wx.getNetworkType (OBJECT) 获取 网 络 类 型 ， 其 OBJECT 参数 如 表 10-2 
所 示 。 


表 10-2 wx.getNetworkType (OBJECT) 的 参数 
参数 说 明 
success() ”Fuction | “是 接口 调用 成 功 的 回调 函数 ， 返 回 网 络 类 型 
failO 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 ) 


网 络 类 型 的 有 效 什 为 wifi、2g、3g、4g、unknown、none， 其 中 unknown 表示 Android 
下 不 第 见 的 网 络 类 型 ，none 表示 无 网 络 。 
wxX.getNetworkType(OBJECT) 示 例 代 码 如 下 : 


天 | 血 


I 


1]. wx.getNetworkType (tl 
ee SUCCeSS: functionl(lres)} 1 


下: 微 信 小 程序 开发 零 基础 入 门 


-Ty 


/ /返回 网 络 类 型 
/ /其 有 效 值 为 wifi、2g、3g、49g、unknown (Android 下 不 常见 的 网 络 类 型 )、none (无 网 络 ) 
Var networkType=res.networkType 
} 
}) 


监听 网 络 状态 变化 
小 程序 使 用 wx.onNetworkStatusChange(CALLBACKE) 监 听 网 络 状 态 变 化 ， 访 接口 从 基础 


库 1.1.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。CALLBACK 参数 说 明 如 表 10-3 所 示 。 


习 Lu To 铺 


表 10-3 wx.onNetworkStatusChange(CALLBACK) 的 参数 


参数 说 明 


1sConnected Boolean 当前 古 宪 有 网 络 连 接 
networkType 网 络 类 型 ， 有 效 值 为 Wifi、2g、3g、4g、unknown、none 


【 例 10-3】 设备 API 之 获取 网 络 状 态 的 简单 应 用 
WXML (pages/demo02/getNetworkType/getNetworkType.wxml) 的 代码 卢 
段 如 下 : 


1. <view class='title>2. 了 网络 </wiew> 

2. <Vliew CJLass= aemo 一 boX > 

<view class='title'> 获 取 网 络 信 息 </view> 

<View Class='status'> 当 前 网 络 状态 11statusl1</Aview> 


. </view> 


WXSS (pages/demo02/getNetworkType/getNetworkType.wxss) 的 代码 片段 如 下 : 


- Statust{ 
font—size: J0rpxs 
margin:20rpx; 

} 


JS (pages/demo02/getNetworkType/getNetworkType.js) 的 代码 卢 段 如 下 : 


1. Page l(t{ 

Wa data: { 

3 status: ! 获 取 中 ， 

4- 上 7 

ee onLoad: function (options) I 

6. Var that=this 

Te // 著 取 当 前 网 络 状 态 

办 wx.getNetworkType (li 

= Success: function (res) I 

10. that.setDatal({ status: res.networkType 上) 
LW } 

1 }) 

Ta // 监 听 网 络 状态 变化 

14. wxX.onNetworkStatusChange (functijon(res} { 
I 1 (res.isConnected)}) 1 

16. that.setDatal({ status: res.networkType 1}) 
ln } else I 

18. that.setData({ status: ' 未 联网 ' }) 

1 } 

20 }) 

-i } 

Wa }) 
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运行 效果 如 图 10-3 所 示 。 
21:43 
例 王 DEMO TT ss 例题 DEMO 
第 10 章 设备 API 第 10 章 设备 API 第 10 章 设备 API 
2. 网 络 2. 网 络 2. 网 络 


攻取 网 络 信息 获取 网 络 信息 获取 网 络 信息 
当前 网 络 状 态 : Wi-Fi 当前 网 络 状 态 : 4G 当前 网 络 状态 : 未 联网 


心 微 信 小 程序 开发 村 基础 人 | ] 已 微 信 小 程序 开发 零 基础 入 门 | 心 微 信 小 程序 开发 零 基 础 入门 


(a) 页 面 初始 效果 (b) 切换 到 4G 网 络 状 态 (c) 切换 到 未 联网 状态 
图 10-3 ”获取 网 络 状态 的 简单 应 用 


【代码 说 明 】 

本 示例 在 getNetworkType.-wxml 中 包含 了 <view> 组 件 如 示 敖 取 的 网 络 状 态 类 型 。 在 
getNetworkType.js 的 data 中 定义 status 的 初始 值 为 “获取 中 ”。 在 onLoad0 函 数 中 前 先 使 用 
wxX.getNetworkIypeO 获取 当前 网 络 状 态 人 信息， 并 调用 setData0 方 法 洽 染 到 
getNetworkType.wxml 页 面 上 ; 然后 使 用 wx.onNetworkStatusChang0 监 听 网 络 是 否 用 生变 化 ， 
如 采 断 网 则 显示 “未 联网 ”否则 显示 对 应 的 网 络 类 型 。 

在 图 10-3 中 ,图 (a) 为 页 面 初 始 效果 ， 此 时 网 络 状态 为 Wi-Fi， 然 后 使 用 开 友 者 工具 模 
拟 占 进行 网 络 切 换 ; 图 (b) 为 切换 到 4G 网 络 状 态 ; 图 (c) 为 未 联网 状态 。 


10.2.2 WI1i-Fl 

Wi-Fi 是 Wireless-Fidelity 无线 保 上 中) 的 缩写 形式 ， 它 是 一 种 允许 电子 设备 连接 到 一 个 
无 线 局 域 网 (WLAN) 的 技术 ， 由 Wi-Fi 联盟 所 持 有 。 目 前 市 面 上 绝 大 多 数 手 机 设备 都 是 有 具 
有 Wi-Fi 连接 功能 的 。 

小 程序 中 的 Wi-Fi 相关 接口 如 表 10-4 所 示 。 


表 10-4 Wi-Fi 相关 接口 


接口 说 明 
wx.startWifi(OBJECT) 打开 Wi-Fi 
Wx.stopWifi(OBJECT) 关闭 Wi-Fi 
wx.getWifiList(OBJECT) 请 求 获取 Wi-Fi 列表 
鉴 听 在 : 至 i-Fi 列 | [ 据 时 的 事件 ,然后 在 回调 中 返回 Wi-Fi 
wx_onGet WifiList(CALIBACK) re Wi-Fi 列表 数据 时 的 事件 ,然后 在 回调 中 返回 Wi-Fi 
wx setWifiList(OBJECT) 在 onGetWifiList0 回 调 后 设置 wifiList 中 AP 的 相关 人 巨 古 10S 


的 特有 接口 ， 该 接口 从 基 在 


| 


库 1.6.0 开始 文 持 


本 微 信 小 程序 开发 零 基础 入 门 


接口 说 明 
wx.connectWifi(OBJECT) 连接 Wi-Fi， 该 接口 从 基础 库 1.6.0 开始 支持 
wx.OnWifConnected(CALLBACR) 监听 连接 上 Wi-Fi 的 事件 
wx.getConnectedWifi(OBJECT) 获取 已 连接 中 的 Wi-Fi 信息 ， 从 基础 库 1.6.0 开始 支持 


设备 连接 Wi-Fi 时 接口 调用 的 顺序 如 表 10-5 所 示 。 
表 10-5 ”连接 Wi-Fi 时 接口 调用 的 顺序 


设备 平台 连接 周边 Wi-Fi 

startWifi()— getWifiList()— oNnGet WIifiList()— 
connectWifi()—onWifiConnected() 
startWifi()— getWifiList()— oNnGet WifiList()— 
setWifiList0 — on WifiConnectedO (i1OS 11.0 
及 11.1 版 本 因 系 统 原因 暂 不 文 持 ) 


Android startWifi()— connectWifi()— on WifiConnected() 


:OS startWifi() — connectWifi() — on WifiConnected() 
和 ( 仅 iOS 11 及 以 上 版 本 支持 ) 


打开 /关闭 Wi-Fi 
小 程序 分 别 使 用 wx.startWifi(OBJECT) 和 wx.stopWifi(OBJECT) 打 开 和 关闭 Wi-Fi， 这 两 
个 接口 的 OBJECT 参数 完全 相同 ， 说 明 如 表 10-6 所 示 。 


表 10-6 OBJECT 参数 


参数 说 明 
. ee 接口 调用 成 功 的 回调 函数 ， 返 回 String 类 型 参数 errMsg 表 
Function 示 回 调 信 息 


failO 接口 调用 失败 的 回调 函数 


complete0 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


Wi-Fi 列表 

1) 获取 Wi-Fi 列表 

小 程序 首先 使 用 wx.getWifiList(OBJECT) 请 求 获 取 Wi-Fi 列表 ， 其 参数 与 表 10-6 完全 
相同 。 

2) 监听 Wi-Fi 列表 数据 

然后 需要 配合 使 用 wx.onGetWifiList(CALLBACK) 监 听 在 获取 到 Wi-Fi 列表 数据 时 的 事 
件 ， 并 在 回调 中 返回 Wi-Fi 列表 数据 。 其 中 CALLBACK 参数 说 明 如 表 10-7 所 示 。 


表 10-7 wx.onGetWifiList(CALLBACK) 返 回 参 数 


多 数 | 关 型 说 也 


wifiList Wi-Fi 列表 数据 


1 


success() 


0H| 0 


| 


每 个 数组 元 系 的 属性 如 表 10-8 所 示 。 
表 10-8 ”Wi-Fi 列表 项 说 明 表 


CE 砚 
SSID Wi-Fi 的 SSID 

BSSID Wi-Fi 的 BSSID 
secure Wi-Fi 是 否 安 全 
signalStrength Wi-Fi 信号 强度 


第 10 章 设备 API 


3) 设置 AP 信息 

小 程序 利用 wx.setWifiList(OBJECT) 在 onGetWifiList0 回 调 后 设置 wifiList 中 AP 的 相关 
信息 ， 它 是 iO0S 的 特有 接口 。 该 接口 从 基础 库 1.6.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。 

其 OBJECT 参数 说 明 如 表 10-9 所 示 。 


表 10-9 wx.setWifiList(OBJECT) 的 参数 
参数 说 _ 明 
wifiList 提供 预 设 的 Wi-Fi 信息 列表 
success() 接口 调用 成 功 的 回调 函数 


fail() \ 接口 调用 失败 的 回调 函数 
completeO Fuction | 否 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 痢 执行 》 


其 中 wifiList 是 数组 类 型 ， 每 个 数组 元 系 的 属性 如 表 10-10 所 示 。 


表 10-10 ”Wi-Fi 列表 项 说 明 表 
参 数 类 型 说 。 明 
SSID Wi-Fi 的 SSID 
BSSID Wi-Fi 的 BSSID 
password sting Wi-Fi 设备 窄 公 


注意 事项 如 下 : 

(1) 该 接口 只 能 在 onGetWifiList0 回 调 之 后 调用 。 

(2) 此 时 客户 端 会 挂 起 ， 等 待 小 程序 设置 Wi-Fi 信息 ， 请 务必 尽快 调用 该 接口 ， 若 无 数 
据 请 传 入 一 个 空 数组 。 

(3) 有 可 能 随 看 周边 Wi-Fi 列表 的 刷新 ， 单 个 流程 内 收 到 多 次 珊 有 存在 重复 的 Wi-Fi 列 
表 的 回调 。 

示例 代码 如 下 : 


并 


I 


区 


1 。 wx.onGetWifiList (function(res) I 
a if (res.wifiList.length) { 

3 WX. SetWIifiListl(1 

eh wifiList=: [1 

I SSID: res.wifiList|[0|.SsSSsID, 
6. BSSID: res.wifiListi0| .BSSID, 
+4. password: "123456" 

Se }] 

J }) 

10. 1} else I 

| WX. SetWIifiList(t 

Ls wifiList: [| 

1 }) 

14. 1} 

1 .1) 


1l16.wx.gqetWifiList() 


连接 Wi-Fi 

1) 直接 连接 Wi-Fi 

小 程序 使 用 wx.connectWifi(OBJECT) 连 接 Wi-Fi， 该 接口 从 基础 库 1.6.0 开始 支持 ， 低 版 
本 需 做 兼容 处 理 。 硅 用 户 已 知 Wi-Fi 信息 ， 可 以 直接 利用 该 接口 连接 ， 需 要 注意 只 有 Android 
与 iOS 11 以 上 版 本 支持 。 其 OBJECT 参数 如 表 10-11 所 示 。 


45” 微 信 小 程序 开发 零 基 础 入 门 


表 10-11 wx.connectWifi(OBJECT) 返 回 参 数 
参数 说 明 
SSID 足 Wi-Fi 设备 SSID 
BSSID Wi-Fi 设备 BSSID 
password Wi-Fi 设备 密码 
success0 | Function | 和 否 | 接口 调用 成 功 的 回调 函数 
fail0 接口 调用 失败 的 回调 函数 


complete() 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 ) 


2) 监听 连接 Wi-Fi 事件 
小 程序 使 用 wx.onWifConnected(CALLBACKE) 监 听 连 接 上 Wi-Fi 的 事件 ， 访 接口 从 基础 


ID 到 | 友 | 各 | 和 


到 


库 1.6.0 开始 文 持 ， 低 版 本 需 做 兼容 处 理 。CALLBACK 参数 说 明 如 表 10-12 所 示 。 


表 10-12 ”wx.onWiffiConnected(CALLBACK) 返 回 参数 
a 天 至 说 明 
wifl Object Wi-Fi 信息 


Wi-Fi 对 象 的 属性 如 表 10-13 所 示 。 
表 10-13 ”Wi-Fi 对 象 属性 


参数 说 了 明 
SSID Wi-Fi 的 SSID 
BSSID Wi-Fi 的 BSSID 
secure Wi-Fi 是 否 安全 


slgnalStrength Wi-Fi 信号 强度 


3) 获取 已 连接 Wi-Fi 信息 
小 程序 使 用 wx.getConnectedWifi(OBJECT) 获 取 已 连接 中 的 Wi-Fi 信息 , 该 接口 从 基础 库 


1.6.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 10-14 所 示 。 


表 10-14 wx.getConnectedWifi(OBJECT) 的 参数 


人 总 ”二 


本 呈现 -| 接口 调用 成 功 的 回调 函数 ， 返 回 Object 类 型 参数 wifi 表示 
回调 wifi 的 具体 信息 ， 见 前 面 的 表 10-13 
failO 接口 调用 失败 的 回调 函数 


ET 接口 调用 结束 的 同调 函数 〈 调 用 成 功 与 否 都 执行 ) 


errCode 列表 
每 个 Wi-Fi 相关 接口 调用 的 时 候 都 会 返回 errCode 字段 ， 详 细 说 明 如 表 10-15 所 示 。 


表 10-15 ”errCode 说 明 

错 误 码 备注 
0 正常 

000 不 和 调用 sarih 本 
12001 当前 系统 不 支持 相关 功能 
12002 Wi-Fi 密码 错误 

12003 连接 超时 

12004 重复 连接 Wi-Fi 
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续 表 


12005 wifi not turned on Android 特有 ， 未 打开 Wi-Fi 开关 

12006 Android 特有 ， 未 打开 GPS 定位 开关 

12007 用 户 拒绝 授权 链接 Wi-Fi 

12009 系统 运营 商 配置 拒绝 连接 Wi-Fi 

12010 系统 其 他 错误 ， 需 要 在 errMsg 打印 具体 的 错误 原因 


12011 weapp in background 应 用 在 后 台 无 法 配置 Wi-Fi 


【 例 10-4】 设备 API 之 Wi-Fi 的 简单 应 用 
WXML (pages/demo02/wifywif wxml) 的 代码 片段 如 下 : 


生 冯 再 | ”说 朋 CE 


<wview Class="title'>2. 网 二 </view> 
<View Cass= aqemo 一 boX > 
<view class='title'>Wwi-Ei 的 简单 应 用 </view> 
<button type="primary'" bindatap='gqetWiftiInfto"> 获 取 Wi-Ei 状态 
</button> 
3 VICW Class="'Sstatus Iierrorll</view> 
6 <View Class='status'>SSID: {{res.SSID}}</view> 
We <View Class='status'>BSSID: {f{res.BSSID}}</view> 
8 
号 
1 


视频 讲解 


心 tf i 


ES 人 [fres.secure} </ Tew> 
<view Class='status'> 信 号 强度 : {{res.signalstrength}}</view> 
0 .</view> 


WXSS (pages/demo02/wifywifi.wxss〉 的 代码 厂 段 如 下 : 


-Status 1{ 
text—aliogn: left; 
margin: lorpxs; 


} 


户 ho 贿 


JS (pages/demo02Awifiwifjs) 的 代码 片段 如 下 : 


- Page({ 
GetwiftiInto: function() 1{ 
Var that=this 
WX .getConnectedWif1i(t{ 
Success: function(res) 1{ 
that.setDatal({ res: res.wifi }) 


}) 


下 


运行 效果 如 图 10-4 所 示 。 

【代码 说 明 】 

本 示例 在 Wifi.wxml 中 包含 了 <button> 组 件 用 于 获取 当前 Wi-Fi 状态 信息 ， 对 应 的 目 定义 
图 数 是 getWifInfo0; 按钮 下 方 是 4 个 <view> 组 件 分 别 用 于 显示 攻取 的 Wi-Fi SSID、BSSID、 
安全 性 和 信号 强度 。 在 wifi.jjs 的 getWifiInfo0 触 发 时 调用 wx.getConnectedWifi0) 获 取 数 据 ， 并 
调用 setData0 方 法 痊 染 到 wifiwxml 页 面 上 。 

在 图 10-4 中 ， 图 (a) 为 页 和 面 初 始 效 果 ， 此 时 尚未 获取 数据 ， 图 (b) 为 真 机 查询 结果 ， 


当前 为 Wi-Fi 已 连接 状态 ， 由 该 图 可 见 成 功 获 取 到 了 相关 数据 。 


中 微 信 小 程序 开发 零 基 础 入 门 丰 j 


if 中 国电 信 全 下 午 8:58 


例题 DEMO 
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2. 网 络 


Wi-Fi 的 简单 应 用 
获取 Wi-Fi 状 态 


SSID: 
BSSID: 
安全 性 : 


”三 四 = jh 
ill 中 国电 全 从 “8: 


例题 DEMO 
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2. 网 络 


Wi-Fi 的 简单 应 用 


获取 Wi-Fi 状 态 
SSID: TP-LINK_305 
BSSID: 50:bd:5f:87:93:28 
安全 性 : true 


信号 强度 : 信号 强度 : 0.8286325931549072 


人 @ 微 信 小 程序 开发 零 基础 入 | ] @ 微 信 小 程序 开发 零 基础 入 门 


(a) 页 面 初始 效果 (b) 获取 Wi-Fi 状态 


10-4 ”Wi-Fi 的 简单 应 用 


10.3.1 罗拉 


开启 罗盘 监听 
小 程序 使 用 wx.startCompass(OBJECT) 开 始 监听 罗盘 数据 ， 其 OBJECT 参数 如 表 10-16 


所 示 。 
表 10-16 wx.starrCompass(OBJECT) 的 参数 
参数 说 明 


让 


success0 
fail0 
complete0 | Function | 否 
结束 罗盘 监听 
小 程序 使 用 wx.stopCompass(OBJECT) 结 束 监 昕 罗盘 数据 ， 该 接口 的 OBJECT 参数 说 明 
与 wx.startCompass(OBJECT) 的 完全 相同 ， 见 表 10-16。 
点 听 加 盘 数据 
小 程序 使 用 wx.onCompassChange(CALLBACK) 监 听 罗 盘 数据 ， 频 率 为 5 次 / 秒 ， 在 接口 
调用 后 会 目 动 开始 监听 ， 可 使 用 wx.stopCompassO 俘 止 监 听 。 


接口 调用 成 功 的 回调 函数 
接口 调用 失败 的 回调 函数 
接口 调用 结束 的 回调 函数 《调用 成 功 与 否 都 执行 ) 


1 


ID 让 


I 


间 
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其 中 CALLBACK 返回 参数 directton， 议 参数 是 Number 类 型 ,表示 辐 对 
的 方 回 上 度数。 
【 例 10-5】 设备 API 之 罗盘 的 简单 应 用 


| 5 WXML (pages/demo03/compass/compass.wxml) 的 代码 片段 如 下 : 
视频 讲解 Eee TREE 人 Eee 


<VTIeW Class="'demo—box'> 
<V1Iew Class='title' > 获取 罗盘 信 已 < /Tiew> 
<View class="'status'> 当 前 方 同 是 : { {degreel}}</view> 


. </view> 


WXSS (pages/demo03/compass/compass.wxss) 的 代码 片段 如 下 : 


.Statust 
THBnE= S12e DTDxs 
margin:20rpx; 


} 


JS (pages/demo03/compass/compass.js) 的 代码 上 搬 段 如 下 : 


Page (1 
onLoad: function(options)} I 
Var that=this 
wx -OICompasscCchange (function (res)l 
that.setData({degree:res.direction})} 
}) 
} 
}) 


真 机 测试 运行 效果 如 图 10-5 所 示 。 
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3. 传 感 胡 


第 10 章 设备 API 
3, 传感器 
获取 罗盘 信息 


当前 方向 是 : 
4.9795002937316895 


获取 罗盘 信息 


当前 方向 是 
236.20668029785156 


驴 微 信 小 程序 开发 要 基础 入 站 久 微 信 小 程序 开发 零 基 础 入 门 


(a) 页 面 初始 效果 (b) 改变 手机 方向 后 的 效果 
图 10-5 “罗盘 的 简单 应 用 
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【代码 说 明 】 

本 示例 在 compass.wxml 中 包含 了 一 个 <view> 组 件 用 于 显示 当前 的 手机 方 同 ， 对 应 的 动 
仿 数 据 是 {{degree}}。 在 compass.js 的 onLoad0 图 数 中 调用 wx.onCompassChangeO 获 取 当 六 
的 罗盘 信息 ， 并 使 用 setData0 方 法 泻 染 到 compass.wxml 页 面 上 。 


10.3.2 ”加 速度 计 


开启 加 速度 数据 监听 
小 程序 使 用 wx.startAccelerometer(OBJECT) 开 始 监听 加 速度 数据 ， 访 接口 从 基础 库 1.1.0 
开始 支持 ， 低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 如 表 10-17 所 示 。 


表 10-17 wx.startAccelerometer(OBJECT) 的 参数 
参数 说 明 
interval 监听 加 速度 数据 回调 函数 的 执行 频率 (最 低 版 本 为 2.1.0) 
success() 接口 调用 成 功 的 回调 函数 
failO 否 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 (调用 成 功 与 吾 部 执行 ) 


其 中 interval 的 有 效 值 如 下 。 

e game: 天 用 于 和 更 新 游戏 的 回调 频率 ， 在 20ms/ 次 左右 。 

。ui: 适用 于 更 新 UI 的 回调 频率 ， 在 60ms/ 次 左 石 。 

e hormal: 普通 的 回调 频 诗 ， 在 200ms/ 深 左右。 

由 于 不 同 设备 的 机 型 性 能 、 当 前 CPU 与 内存 的 占用 情况 均 有 所 震 异 ，interval 的 设置 与 

结束 加 速度 数据 监听 

小 程序 使 用 wx.stopAccelerometer(OBJECT) 结 束 监听 加 速度 数据 其 OBJECT 参数 与 
wx.startAccelerometer(OBJECT) 中 除 Interval 以 外 的 参数 相同 ， 如 表 10-18 所 示 。 


I 


DY 


I 


| 


表 10-18 wx.stopAccelerometer(OBJECT) 的 参数 
参数 说 明 
success() 接口 调用 成 功 的 回调 函数 
fail() 1 接口 调用 失败 的 回调 函数 
completeO 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 孝 执行 ) 


I 


I 


I 


监听 加 速度 数据 

小 程序 使 用 wx.onAccelerometerChange(CALLBACK) 监 听 加 速度 数据 ， 频 率 为 4 深 / 秒 ， 
在 接口 调用 后 会 自动 开始 监听 ， 可 使 用 wx.stopAccelerometer0 停 止 监听 。 

其 中 CALLBACK 返回 参数 如 下 。 

。 Xx: Number 类 型 ， 表 示 X 轴 方 同 的 加 速度 。 

e V: Number 关 型 


视频 讲解 


WXML (pages/demo03/acc/acc.wxml) 的 代码 片段 如 下 : 


1. <view class='titler>3. 人 传感器 < 人 /View> 
2. <Vliew Class="'demo—box'> 
3 <view class='title'> 获 取 加 速度 信息 </view> 


第 10 章 设备 API 


<view Class='"statuas7>X 和 柏 : { {res.x}}</view> 
<view Class='status'>Y 轴 : {{res.vy}}</view> 
<view class='"'status'"'>% 轴 : TIEcS ZI1I /7 Im 
. </vVview> 


| 


WXSS (pages/demo03/acc/acc.wxss) 的 代 但 上 请 段 如 下 : 


-Statust 
Pome Sie rs 
margin:20rpx; 


} 


JS (pages/demo03/acc/acc.js) 的 代 公 片段 如 下 : 


1. Page ({ 

onLoad: function(options) I{ 

卫 二 Var that=this 

4. wxXx.onAccelerometerChange (function (res)t{ 
本 号 七 了 aa 七 .Se 七 Data ({FeSs:TeS 上 ) 

6. }) 

1. } 

8. 1}) 


运行 效果 如 图 10-6 所 示 。 


TITTY WecChat 全 16:41 WeChat 二 165:41 


mEDEMO 鲍 题 DEMO 
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第 10 重 设备 API 
3. 传感器 


获取 加 速度 信息 
X 轴 : 0.29147 
Y 轴 :一 0.90101 
Z 轴 :一 0.32129 


获取 加 速度 信息 
X 轴 :0 
Y 轴 :一 1 
Z 轴 :0 


名 微 人 小 程序 开发 零 基 础 入 门 局 微 信 小 程序 开发 要 基础 入 | ] 


(a) 页 面 初始 效果 (b》 更 新 加 速度 信息 
图 10-6 ”加 速度 计 的 简单 应 用 


【代码 说 明了 】 

本 示例 在 acc.wxml 中 包含 了 3 个 <view> 组 件 分 别 用 于 显示 X、Y、Z 轴 的 加 速度 数据 ， 
对 应 的 动态 数据 是 {{res.x}}、{f{res.yl}、{{res.Zz}}。 在 acc.js 的 监听 页 面 加 载 函 数 onLoad0 中 
调用 wx.onAccelerometerChange0 获 取 当 前 的 加 速度 信息 ， 并 使 用 setData0 方 法 泻 染 到 
acc.Wxml 页 面 上 。 


本 习 。 微 信 小 程序 开发 零 基 础 入 门 2? 


10.4.1 ”被 碾 


小 程序 使 用 wx.onUserCaptureScreen0 监 听 用 户主 动 截屏 事件 ,用户 使 用 系统 截屏 按键 截 
屏 时 触发 此 事件 。 该 接口 从 基础 库 1.4.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。 


1 ，wWX .onUseIrcCapturesScreen (function() ({ 


4 console.1log(' 用 户 截 屏 了 ') 
3 1+} 


10.4.2” 扫 码 


小 程序 使 用 wx.scanCode(OBJECT) 调 出 客户 疹 扫 但 界面 ， 扫 码 成 功 后 返回 对 应 的 结果 。 
其 OBJECT 参数 如 表 10-19 所 示 。 


表 10-19 wx.scanCode(OBJECT) 的 参数 
参数 说 明 
本 是 否 只 能 从 相机 扫 码 ， 不 允许 从 相册 选择 图 片 〈 节 低 版 


扫 码 类 型 (最低 版 本 为 1.7.0) ， 数 组 参数 可 选 值 有 
scanType Array 否 'qrCode' (二 维 码 ) 、'barCode' (条形码) 、'datamatrix' 
(DataMatrix) 、'pdf417' (pdf417) 


success() 接口 调用 成 功 的 回调 函数 
failO Function | 否 | 接口 调用 失败 的 回调 函数 


complete0 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


其 中 successO 参 数值 的 说 明 如 下 。 

e result: 所 扫 码 的 内 容 。 

e。 scanType: 所 扫 公 的 类 型 。 

。 charSet: 所 扫 码 的 字符 集 。 

au e。 path: 当 所 扫 码 为 当前 小 程序 的 合法 二 维 码 时 会 返回 二 维 码 携 市 的 
path 。 

e。 IawData: 原始 数据 ，base64 编 伺 。 

hi 【 例 10-7】 设备 API 之 扫 码 的 简单 应 用 

视频 讲解 WXMIL (pages/demo04/scanCode/scanCode.wxml) 的 代码 上 请 段 如 下 : 


onlyFromCamera 


| 


I 


<Vview Class="'title"'>4. 用 户 行 入 </view> 

<View Class='demo—box'> 
<view Class='title'> 殷 人 码 </view> 
<button type="primary” bindtap="scanCode"> 开 始 扫 但 </button> 
<view class='status'> 字 符 集 : {{res.charset}}</view> 
<Vlew Class="'status"' > 扫 码 类 型 ， {{res.scanType}}</view> 
<view Class='status"'> 扫 码 结 果 : {{res.result}l}</view> 

. </view> 


J 
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WXSS (pages/demo04/scanCode/scanCode.wxss) 的 代码 片段 如 下 : 


- -Statust 
text—align: left; 
margin: lorpx; 


} 


户 IO 户 


JS (pages/demo04/scanCode/scanCode.js) 的 代码 片段 如 下 : 


1 .Page({ 

ScanCode: functiont() I 

es var that=this 

A. WX.ScanCode (1{ 

5., success:function (res)t 


that.setData({res:resl}) 


上 Oo] 台 ， 
| 
一 一 
ee 


这) 
和 
Se 


运行 效果 如 图 10-7 所 示 。 
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《例题 DEMO 二 维 码 /条 码 


下 午 5:10 


例题 DEMO 


| 人 56% 


例题 DEMO “(© 


第 10 章 设备 API 
4. 用 户 行为 


第 10 章 设备 API 
4. 用 户 行 为 


扫 码 扫 码 


字符 集 : UTF-8 
扫 码 类 型 : QR_CODE 


字符 集 : 
扫 码 类 型 : 
扫 码 结果 : 


扫 码 结果 : 
http:/ /weixin.gqq.com/r/vjskPO— 
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名 微 信 小 程序 开发 零 基 础 入门 


(a) 页 面 初 妨 效 采 (b) 单 击 按钮 进入 扫 码 界面 (c) 扫 码 结果 
图 10-7” 扫 码 的 简单 应 用 


【代码 说 明了】 

本 示例 在 scanCode.wxml 中 包含 了 一 个 <button> 组 件 用 于 局 动 扫 码 功能 ， 对 应 的 目 定义 
函数 是 scanCode0; 按钮 下 方 有 3 个 <view> 组 件 分别 用 于 显示 获取 到 的 字符 集 、 扫 码 类 型 和 
扫 码 结果 。 在 scanCode.js 中 使 用 目 定 义 图 数 scanCode0O 调 用 wx.scanCodeO 获 取 扫 人 码 信 息 ， 并 
使 用 setData0 方 法 演 染 到 scanCode.wxml 页 面 上 。 

在 图 10-7 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 尚未 获取 数据 ， 图 (b) 为 真 机 扫 码 过 程 
图 (c) 为 扫 人 码 结 果 ， 由 该 图 可 见 成 功 获 取 a 到 了 相 天 数据 。 
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10.4.3 ”剪贴 板 


设置 剪贴 板 内 容 
小 程序 使 用 wx.setClipboardData(OBJECT) 设 置 系统 剪贴 板 的 内 容 , 该 接口 从 基础 库 1.1.0 
开始 支持 ， 低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 10-20 所 示 。 


表 10-20 wx.setClipboardData(OBJECT) 的 参数 


参数 说 明 


data String 需要 设置 的 内 容 
success0 接口 调用 成 功 的 回调 函数 
fail0 否 接口 调用 失败 的 回调 函数 


DM 


complete() 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 ) 


获取 和 剪贴 板 内 容 
小 程序 使 用 wx.sgetClipboardData(OBJECT) 获 取 系 统 副 贴 板 内 容 ， 访 接 口 从 基础 库 1.1.0 
开始 支持 ， 低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 10-21 所 示 。 
表 10-21 wx.getClipboardData(OBJECT) 的 参数 


参数 说 明 

网 接口 调用 成 功 的 回调 函数 , 返回 String 类 型 参数 data 表示 前 
贴 板 的 内 容 

failO 接口 调用 失败 的 回调 函数 

completeO 接口 调用 结束 的 回调 函数 《调用 成 功 与 否 都 执行 ) 


【 例 10-8】 设备 API 之 剪贴 板 的 简单 应 用 
WXML (pages/demo04/clipboard/clipboard.wxml)》 的 代码 片段 如 下 : 


1. <view class='title'>4. 用 户 行 为 </view> 
a 二 7. <Vwiew class='demo-box7> 
一 Ar 二 "七 i '»> 前 贴 板 </view> 
视频 讲解 3 view Class="title"'> 且 贴 板 </View 


4. <view Class='title'>{{codel}ll}</view> 
a <button type="pIrimary™ bindtap-"setclipboard"> 所 击 此 处 复制 上 和 面 序列 与 < /button> 


6. <button bindtap="getClipboa rd"> 获 取 攀 贴 板 内 容 </button> 
7. </view> 


JS (pages/demo04/clipboard/clipboard.js 〉 的 代码 片段 如 下 : 


LU 

二 data: { 

3 code: 'Lszw5W2a0Nj' // 随 机 写 一 串 复 洒 的 序列 号 
a }, 

5. // 复 制 到 剪贴 板 

6. setClipboard: function() 1{ 
ye let code=this.data.code 
号 二 wxXx.SetClipboardDatalt 

Se data: code, 

10. Success: function() 1 
i wxXx.ShowToast({ 

0 title: ' 复 制 成 功 ! " 
1 }) 

14. } 


15. }) 
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1 和 

17. /7 获取 剪 贴 板 和 内容 

18- getClipboard: functiont() 1 

Lo wiX.getcCclipboardData (1{ 

20. SUCCeSS: function(res) 1 

过 外- wx.ShowToast({ 

2 title: ' 极 贴 板 内 容 古 : ' + res.data, 
pA 1icon: ‘none" 


808.1) 


Yo Pe LA 
运行 效果 如 图 10-8 所 示 。 
16:01 100s a We 15:03 1 TTTT 则 UE 人 站 治 二 反 ， 15:03 
人 mEDEMO 二 例 是 DEMG "ee 从 虹 DEMG 
第 10 章 设备 APi 第 10 章 设备 API 第 10 章 设备 API 
4. 用 户 行为 4. 用 户 行为 44. 用 户 行为 
草 贴 板 剪贴 板 剪贴 板 
LsZw5W2a0N] LsZw5W2a0Mj LsZw5W2a0Mj 


获取 剪贴 板 内容 获取 剪贴 板 内 容 


前 贴 概 内 容 是 : LsZw5W2a0N] 
所 ) 生 信和 小 程序 开 卜 橙 基 锁 入 | ] 和 人 


(a) 页 面 初始 效果 (b) 复制 内 容 到 剪贴 板 (c) 获取 甬 贴 板 中 的 内 容 
图 10-8 ” 勇 贴 板 的 徐 单 应 用 


【代码 说 明 】 

本 示例 和 在 clipboard.wxml 中 包含 了 一 个 <view> 组 件 用 于 显示 一 串 序 列 写 ; 在 其 下 方 的 两 
个 <button> 组 件 分 别 用 于 单 击 复制 该 序列 号 、 获 取 剪 贴 板 内 容 ， 对 应 的 目 定 义 函 数 分 别 是 
setClipboard0 和 getClipboard()。 在 clipboard.js 的 这 两 个 图 数 中 分 别 调 用 wx.setClipboard0 和 
wx.getClipboard0 来 设置 和 获取 剪 贴 板 内 容 , 并 在 成 功 回 调 函 数 success0 中 使 用 wx.showToastO 
弹出 提示 框 。 

在 图 10-8 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 复制 内 容 到 剪贴 板 ， 此 时 会 给 出 提示 
框 ; 图 《c) 为 获取 胡 贴 板 中 的 内 容 ， 由 该 图 可 见 已 经 成 功 将 序列 扎 复 制 到 了 勇 贴 板 中 。 


10.4.4 通话 


拨打 电话 
小 程序 使 用 wx.makePhoneCall(OBJECT) 向 指定 的 号 码 拨打 电话 ， 其 OBJECT 参数 说 明 
如 表 10-22 所 示 。 
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表 10-22 wx.makePhoneCall(OBJECT) 的 参数 


参数 说 明 
phoneNumber 再 要 拨打 的 电话 号 码 
success() 合 接口 调用 成 功 的 回调 函数 
fail0 接口 调用 失败 的 回调 函数 
completeO 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


wx.makePhoneCall(OBJECT) 的 示例 代码 如 下 : 


wxX.makePhoneCalll(t 
"138000012347" 


// 仅 为 示例 ， 可 替换 为 真实 的 电话 号 码 


phoneNumber: 
a 


手机 联系 人 

小 程序 使 用 wx.addPhoneContact(OBJECT) 添 加 手机 联系 人 ， 访 接口 从 基础 库 1.2.0 开始 
文 持 ， 低 版 本 需 做 菩 容 处 理 。 在 调用 后 ， 用 尸 可 以 选择 将 该 数据 以 “ 狐 增 联系 人 ”或 “添加 
到 已 有 联系 人 ”的 方式 写 入 手机 通讯 孙 ， 完 成 手机 通讯 录 联 系 人 和 联系 方式 的 增加 。 

OBJECT 参数 说 明 如 表 10-23 所 示 。 


表 10-23 wx.addPhoneContact(OBJECT) 的 参数 


参数 说 了 明 
photoFilePath 头像 的 本 地 文件 路 径 
nickName 昵称 
lastName 姓氏 
middleName String 中 间 名 
firstName 名 字 
remark 备注 
mobilePhoneNumber String 手机 号 
weChatNumber 微 信号 
addressCountry 联系 地 址 国家 
addressState 联系 地 址 省 份 
addressClty 联系 地 址 城市 
addressStreet 联系 地 址 街道 
addressPostalCode 联系 地 址 邮政 编码 
organization 公司 
title 职位 
workFaxNumber 工作 传 上 
workPhoneNumber 工作 电话 
hostNumber 公司 电话 
email 电子 邮件 
ul 网 站 
workAddressCountry 工作 地 址 国家 
workAddressState 工作 地 址 省 份 
WoIKAddressClty 工作 地 址 城市 
workAddressStreet 工作 地 址 街道 
workAddressPostalCode String 否 工作 地 址 邮政 编码 
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参 。 数 必 填 说 ” 明 
bomeFaxNumbe 全 世人 机 
homePhoneNumber 住宅 电话 
homeAddressCountry 住宅 地 址 国家 
homeAddressState 住宅 地 址 省 份 
homeAddressCity 住宅 地 址 城市 
homeAddressStreet 住宅 地 址 街道 
homeAddressPostalCode 住宅 地 址 邮政 编码 

示 漆 加 成 功 

| 接口 调用 失败 的 回调 函数 ， 返 回 errMsg:fail 
failO Function 否 cancel 表示 用 户 取消 ; 返回 errMsg:fail $fdetail} 
表示 调用 失败 ，detail 为 详细 信息 

接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 

complete() Function 、 


执行 ) 


【 例 10-9】 位 置 API 之 通信 管理 的 综合 应 用 
WXML (pages/demo04/contact/contact.wxml) 的 代码 上 请 段 如 下 : 


1. <view class='title'>4. 用 户 行 为 </view> 
ha < VIEW Class="'demo—box'> 


<view Class='title"»> 退 信 </view> 
饮 频 讲解 4. <lInput bindblur="‘nameBlur" placeholder=" 请 输入 联系 人 姓名 ， 
<input bindblur='phoneBlur" placeholder=" 请 输入 联系 人 电话 ' /> 
6 - <Dbutton type=" primary” pindtap 一 "makeCall"> 拨 打 电 话 </button> 
了 <Dbutton bindtap="addPerson "> 洪 加 联系 人 </button> 
8. </view> 


WXSS (pages/demo04/contact/contact.wxss) 的 代码 片段 如 下 : 


1. input,buttont 
margin: lorpxs 


[5 


0 


JS (Pages/demo04/contact/contact.js) 的 代码 片段 如 下 : 


1. Page (1{ 

2. name: " '， // 联 系 人 姓名 

3. phone: '" '， // 电 话 号 码 

4.  // 更 新 联系 人 姓名 

i nameBlur: functionl(e} 1 

6. this.name=e.detail.value 
7. }, 

8.  // 更 新 电话 号 码 

人 PhoneBlur: function(e) { 
10. this.phone=e.detail .value 
有 

12- // 打 电话 

13. makeCall: functiont() 1 

14. let phone=this .phone 

Me wxX.makePhoneCalllt 

| phoneNumber: phone 

11. }) 


18- ir 


和 
二 四 < 
a 
po 
pa 
pe 
二 
he 
wt 
之 和 = 
2 
30. 
he 
二 
he 
了 
i 
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// 洪 加 联系 人 
addPerson: function()} { 
Tet name=this .name 
let phone=this .Phone 
i (name==" " || phone==" ") 1 
wX.ShowTIoast(t{ 
title: ! 姓名 和 电话 不 能 为 空 ! '， 
lcon: “mone 
}) 
} else 1{ 
wxX.addPhoneContact(t 
firstName: name, 
mobilePhoneNumber: 
}) 
} 
} 
}) 


phone 


真 机 测试 运行 效果 如 图 10-9 所 示 。 


绩 ! 中 国生 下 年 也 :3 了 7 P| 


例 题 DEMO .加 
第 10 章 设备 API 
4. 用 户 行为 
通讯 
请 输入 联系 人 姓名 


se 人 = 人 
月 辆 联系 上 A 昌 话 


拨打 电话 


添加 联系 人 


名 微 信 小 程序 开发 堆 基 础 入 门 


(a) 页 面 初 始 效果 


Cb) 单 击 “ 拨 打 电 话 ” 按 钮 


姓 镍 和 电话 不 能 为 室 ! 


添加 联系 人 


写 微 入 小 程序 开发 零 基 础 入 门 


创建 新 联系 人 


添加 到 现 有 联系 人 


取 崩 


(d) 添加 联系 人 的 错误 提示 


(e) 单 击 “ 添 加 联系 人 ”按钮 
图 10-9 通信 管理 的 绽 合 应 用 


(c) 真实 通话 页 面 


10086 


熏 联系 电话 
涨 加 电话 


添加 电子 邮件 


电话 铃声 默认 


短信 和 铃声 默认 


(f) 新 建 联系 人 页 面 
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【代码 说 明 】 

本 示例 在 contact.wxml 中 包含 了 两 个 <input> 输 入 框 分 别 用 于 输入 联系 人 姓名 和 电话 ， 对 
应 的 失去 焦点 事件 目 定义 函数 是 nameBlur0 和 phoneBlur0， 一 旦 输入 完毕 数据 将 分 别 更 新 到 
contact.js 页 面 变 量 name 和 phone 中。 在 输入 框 的 下 方 是 两 个 <button> 组 件 分 别 用 于 打 电 话 和 
添加 联系 人 ， 对 应 的 目 定 义 图 数 分 别 是 makeCall0 和 addPerson()。 

在 图 10-9 中 ， 图 (a) 为 页 面 初 始 效果 ， 此 时 尚未 填写 数据 ; 图 (b) 为 填写 数据 后 单 击 
“拨打 电话 ”按钮 的 效果 ， 此 时 手机 会 提示 呼叫 号 码 ; 图 (ce) 为 真实 通话 页 面 ; 图 (d) 为 未 
填 信 息 就 添加 联系 人 时 的 错误 提示 ; 图 (e) 为 填写 信息 后 弹出 的 操作 染 单 ， 用户 可 以 选择 玖 
加 新 联系 人 或 更 新 已 有 联系 人 ; 图 (f) 为 成 功 跳 转 到 手机 系统 目 市 的 新 建 联系 人 页 面 。 


10.5.1 ”内 在 


小 程序 使 用 wx.onMemoryWarning(CALLBACK) 监 听 内 人 存 不 足 的 香 警 事件 。 其 中 在 
Android 下 有 告警 等 级 划分 ， 只 有 LOW 和 CRITICAL 会 回调 开发 者 ; 1OS 无 等 级 划分 。 
示例 代码 如 下 : 
1 。 wx .OnMemorywarnlingd (functiont()} { 


二 console.1og('" 收 到 内 存 不 足 警 告 ') 
了] 


注意 : 只 有 Android 具有 CALLBACK 回调 参数 level， 该 参数 是 Number 类 型 ， 表 示 
对 应 系统 内 存 告 警 等 级 的 宏 定 义 。Android 下 告警 等 级 对 应 系统 的 宏 如 下 : 


TRIM MEMORY RUNNING MODERATE=5 
TRIM MEMORY RUNNING LOW=10 
TRIM MEMORY RUNNING CRITICAL=15 


10.S.2 ” 拼 妖 党 度 

设置 屏幕 亮度 

小 程序 使 用 wx.setScreenBrightness(OBJECT) 设 置 屏 幕 亮度 ， 该 接口 从 基础 库 1.2.0 开始 
文 持 ， 低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 10-24 所 示 。 


表 10-24 wx.setScreenBrightness(OBJECT) 的 参数 
全 区 说 本 
va | Number | 是 | 廊 幕 充 度 信 , 范围 为 0~1,， 0 最 喇 1 最 
success() 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 


completeO 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


获取 屏幕 亮度 
小 程序 使 用 wx.getScreenBrightness(OBJECT) 获 取 屏 幕 亮度 ， 访 接口 从 基础 库 1.2.0 开始 


oj| i 


| 


| 
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文 持 ， 低 版 本 十 做 阅 容 处 理 。 其 OBJECT 参数 说 明 如 表 10-25 所 示 。 
表 10-25 wx.getScreenBrightness(OBJECT) 的 参数 
参数 说 明 
人 接口 调用 成 功 的 回调 函数 ， 返 回 参数 value 为 Number 类 
”| 型 ,表示 屏 幕 亮 度 值 ， 范 围 为 0~1， 其 中 0 最 暗 ，1 最 亮 
fail0 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 会 执行 ) 
保持 常 亮 状态 
小 程序 使 用 wx.setKeepScreenOn(OBJECT) 设 置 是 否 保持 常 亮 状态 ,该 功能 仅 在 当前 小 程 
序 生 效 ， 离 开 小 程序 后 设置 失效 。 访 接口 从 基础 库 1.4.0 开始 文 持 ， 低 厂 本 需 做 碌 容 处 理 。 
其 OBJECT 参数 说 明 如 表 10-26 所 示 。 


表 10-26 wx.setKeepScreenOn(OBJECT) 的 参数 


参数 说 明 
keepScreenOn 是否 保持 屏 攻 利之 


= 接口 调用 成 功 的 回调 函数 ,返回 值 errMsg 为 String 类 型 ， 
success() unction 表示 调用 结果 
failO 接口 调用 失败 的 回调 函数 


completeO) 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 部 执行 ) 


【 例 10-10】 设备 API 之 屏幕 亮度 管理 的 简单 应 用 
WXMI (pages/demo0S/brightness/brightness.wxml) 的 代码 片段 如 下 : 


1. <view class='titler>5-. 手 机 状态 </view> 


2. <View Class="'demo—box'> 
视频 讲解 是 <View Class='title'>(1) 设置 屏幕 亮度 </view> 
4. <Slider min="'0" max="1’" value="'0.9" step="0.1" show-—value bindchange= 
'sliderChange'" /> 
5. </view> 
6. <view Cass= aemo 一 DoX > 
<View class='title'>(2) 查 萄 屏幕 亮度 </view> 
8 <button 七 YPe= PIImaryY ”plInatap= getBrIGIhtness- > 查询 亮度 < /button> 
9 <Vlilew Class='title' > 当前 亮度 : {{brightness}}</view> 
10.</view> 
ll1.<view Class="'demo—box'> 
12. <view Class="title>(3)} 保持 屏幕 常 有 党 </view> 
13. <switch bindchange-'switchChange' /> 保持 常 宫 
14.</view> 


JS (pages/demo05/brightness/brightness.js 》 有 的 代 人 码 厂 段 如 下 : 


1. Page(l 

data: I 

A brightness: " 符 获 取 ， 

4. 上 ， 

二 / /1 .设置 屏 茵 党 度 

6. sliderChange: function(e)} I 
Re wxX.SetScreenBrightness(l{ 
Bs value: ee-.detalil.value 
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}) 
10s -1s 
11. //2 .查询 屏幕 亮度 


12. “getBrightness: functiont() 1 


中 var that=this 

14. WX.getSsScreenBrightnesst(t 

由 SUCCeSS: function(res) 1 

了 中 - that.setDatat({ brightness: res.value.toFixed(1) 上) 
se } 

18. }) 

13. 上， 


20. //3. 监 听 switch 变化 

21. switchChange: function(e) { 

一 let isKeeping=e.detail.value //true 为 开局 状态 
a ift (jsKeeping) { 

We: - wx.SetRKeepScreenOont(l 

es keepSscreenon: true 

26- }) 
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5. 手机 状态 5. 手机 状态 


(1 设置 屏幕 亮度 (1) 设 置 屏 幕 亮度 


(2) 查 询 屏 幕 亮度 (2) 查 询 屏 幕 亮度 


查询 亮度 鲁 询 腕 度 


当前 亮度 : 0.4 


(3) 保 持 屏幕 常 亮 (3) 保 持 屏幕 常 亮 
保持 常 亮 持 常 亮 


@ 微 信 小 程序 开发 零 基础 入 门 [人 


人 (b) 获取 当前 屏幕 亮度 (c) 保持 常 亮 状态 
图 10-10 屏幕 亮度 管理 的 简单 应 用 


【代码 说 明 】 

本 示例 在 brightness.wxml 中 包含 了 3 组 示例 ， 即 设置 屏幕 亮度 、 碍 询 屏 幕 亮 度 、 保 持 屏 
幕 常 宫 。 示 例 1 使 用 了 <slider> 组 件 形 成 滑动 设置 亮度 的 效果 ， 绑 定 change 事件 的 自 定义 函 
数 是 sliderChange(); 示例 2 使 用 了 <button> 组 件 单 击 获取 屏幕 亮度 ， 对 应 的 自 定义 函数 是 
getBrightness(); 示例 3 使 用 了 <switch> 组 件 切换 屏幕 利 亮 与 否 ， 绑 定 change 事件 的 自 定义 函 
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数 是 switchChangeO。 
在 图 10-10 中 ， 图 (a) 为 设置 屏 舌 腕 度 为 0.1 时 的 效果 ， 此 时 画面 会 变 瞳 ; 图 (b) 为 
获取 当前 屏 磊 腕 度 的 效果 ; 图 (c) 为 切换 到 和 钊 亮 状态 。 


10.5.3 ”振动 


小 程序 使 用 wx.vibrateLong(OBJECT) 和 wx.vibrateShort(OBJECT) 分 别 达 到 使 手机 发 生 较 
长 时 间 (400ms)〉 和 较 短 时 间 (15ms) 的 振动 ， 接 口 均 从 基础 库 1.2.0 开始 支持 ， 低 版 本 需 做 
羔 容 处 理 。 它 们 的 OBJECT 参数 说 明 如 表 10-27 所 示 。 


表 10-27 OBJECT 参数 


参数 于 说 明 

success() 接口 调用 成 功 的 回调 函数 

failO 接口 调用 失败 的 回调 函数 

complete( 接口 调用 结束 的 回调 函数 (调用 成 功 与 吾 部 会 执行 ) 


【 例 10-11】 设备 API 之 振动 的 简单 应 用 
WXML (pages/demo05/vibrate/vibrate.wxml》 的 代码 片段 如 下 : 


1. <view class='title'>5 .手机 状态 </view> 
2. <View Class='demo—box'> 
3 <view Class='title'>(1) 上 长 时 间 振 动 (400ms)</view> 


4. <button type="primary”" bindtap='vibrateLong" > 开始 振动 </button> 
5. </viewy> 
6. <view CasSs= aemo 一 DOX > 
<Vlew CasSsSs= 七 1 七 人 > (2) 短 时 间 振 动 (15ms) </view> 
2 <button type="pPrimary' bindtap='vibrateShort" > 开始 振动 </button> 
9. </view> py 
例题 DEMO 
JS (pages/demo0S/vibrate/vibrate.js) 的 代码 片段 如 下 : i 
a 5. 手机 状态 
2. // 长 时 间 振 动 (1) 长 时 间 振 动 ( 400ms ) 
3 vibrateLong:function(})l 
4 wx.vibrateLongl() 
上 二 (2) 短 时 间 振 动 ( 15ms ) 
a vibrateSshort: functiont() 1{ Tr 
Hs wx.vVvibrateshort () | 
忆 - } 
10 .1}) 


页 面 初 始 戏 采 如 图 10-11 所 示 。 

【代码 说 明 】 

由 于 振动 是 一 个 动态 效 末 ， 无 法 通过 截图 表示 ， 建 议 谈 
者 目 行 笃 试 《 除 真 机 测试 外 ， 开 友 者 工具 也 可 以 模拟 振动 
效 朱 )。 


10-11 ”振动 的 简单 应 用 


界面 API 


本 章 主 要 介绍 小 程序 界面 API 的 相关 知识 ， 包 括 交 互 反馈 、 导 航 条 设置 、tabBar 设置 、 
页 面 寻 航 、 动 画 、 页 面 位 置 、 绘 图 和 下 拉 刷 新 8 个 部 分 。 


掌握 消息 提示 框 、 加 载 提示 框 、 模 态 弹 窗 和 操作 菜单 的 用 法 ; 
掌握 导航 条 的 标题 、 动 画 和 颜色 设置 ; 

掌握 tabBar 的 标记 、 红 点 、 监 听 、 样 式 、 显 示 与 隐藏 设置 ; 
掌握 页 面 导 航 的 5 种 切换 方法 ; 

掌握 动画 的 声明 、 描 述 和 导出 步骤 ; 


掌握 页 面 位 置 的 返回 功能 
掌握 在 画布 中 绘制 图 像 、 设 置 样式 、 变 形 、 剪 坊 以 及 图 片 导出 等 功能 : 
掌握 下 拉 刷 新 的 启动 、 监 听 和 停止 方法 。 


11.1.1 ”消息 提示 框 
显示 消息 提示 框 
小 程序 使 用 wx.showToast(OBJECT) 显 示 消 息 提示 框 ，OBJECT 参数 说 明 如 表 11-1 所 示 。 
表 11-1 wx.showToast(OQBJECT) 的 参数 


说 有 明 


参 数 | 类 型 


必 填 _ 
title 提示 的 内 容 
icon 图 标 ， 有 效 值 为 "success"、"loading"、"none" 
EE 定义 因 标 的 本 地 中 全 image 的 优先 级 高 于 icon〔 最 低 版 本 
1mage String 器 为 1.1.0) 
duration Nmber 提示 的 延 退 时 间 ， 单 位 为 寞 秒 ， 默 认为 1500ms 
mask 是 否 显示 透明 遮 单 层 ， 防 止 触摸 穿 透 ， 默 认 值 为 false 


success() 本 接口 调用 成 功 的 回调 函数 
failO Function | 否 | 接口 调用 失败 的 回调 函数 


completeO ”Function | 否 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 会 执行 


icon 有 效 值 的 说 明 如 下 : 
。 success: icon 的 默认 值 ， 用 于 显示 成 功 图 标 ，title 文本 最 多 显示 7 个 汉字 长 度 。 


II | 
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。 loading: 显示 加 载 图 标 ， 此 时 title 文本 最 多 显示 7 个 汉字 长 度 。 
e hone: 不 显示 图 标 ， 此 时 title 区 本 了 最 多 可 显示 两 行 〈( 最 低 版 本 为 1.9.0) 。 
wx.showToast(OBJECT) 示 例 代 人 如 下 : 


. WX.ShowToast l(t{ 
title: "成 功 "， 
icon: "SUCCeSS "， 
duration: 2000 

}) 


nN 


上 述 代码 表示 显示 市 有 “上 成功” 字样 和 对 钓 ( vV ) 图 标的 消 姑 提示 框 ， 该 框 出 现 两 秒 。 
关闭 消息 提示 杠 

让 虽然 消息 提示 杠 可 以 在 指定 时 间 后 目 动 消失 ， 但 是 小 程序 也 可 以 使 用 
wx hideToastO 提 前 关闭 消息 提示 框 . 
锋 # 。。。 【 例 1L1]】 界面 API 之 消息 提示 框 的 简单 应 用 
Sf WXML (pages/demo01/toast/toast.wxml) 文件 代码 如 下 : 


视频 讲解 1. <view class='title'>1. 区 互 反 馈 - 消 息 提 示 框 的 简单 应 用 </Vview> 
. <V1iew Cass= aqdemo 一 boX "> 

<view class='title'>(1) 显 示 消 上 息 提 示 杠 </vriew> 

<button LELYPes="primaryn bindtap "showToast"™> 旺 7 Toast</button> 

. </view> 

. <View Cass= qdemo 一 DoX > 

<view class="'title'>(2) 天 团 消 明 提 示 栓 </view> 

<button type="primary™ bindtap="”hideToastn> 关 闭 Toast</button> 
-> 


Cn 必 Lu ho 


(DO mm 3] 


JS (pages/demo01l/toasttoast.js) 文件 代码 如 下 : 


。 了 Padge( 1{ 
showToast: function() I 
wiX.ShowToast (1! 
title: 'Hello World! "', 
duration: 1000 
}) 
}, 
hideToast: function()} I 
wxXx.hideToast () 


} 


0. 
1 7) 


运行 效果 如 图 11-1 所 示 。 

【代码 说 明 】 

本 示例 在 toast.wxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 显示 和 关闭 消 奶 提示 框 ， 对 应 
的 目 定 义 图 数 分 别 是 showToast0 和 hideToast(。 在 toastjs 中 定义 showTIoastO 方 法 用 于 显示 一 
个 可 以 展示 7 秒 的 提示 框 ,其 文字 内 容 是 “Hello World! "并 市 有 的 认 的 success 图 标 ; hideToast( 
方法 用 于 立刻 关闭 提示 框 。 

在 图 11-1 中 ， 图 (a) 为 单 击 “ 显 示 Toast” 按 钮 后 的 效果 ， 此 时 提示 框 将 出 现 7 秒 然后 
目 动 消失 ; 图 (b) 是 单 击 “ 关 闭 Toast” 按 钮 后 的 效果 ， 此 时 提示 框 将 提前 消失 。 
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第 11 章 界面 API 第 11 章 界面 API 
1 交互 反馈 -消息 提示 框 的 简单 应 用 1. 交互 反馈 -消息 提示 框 的 简单 应 用 


(1) 显示 消息 提示 框 (1) 显示 消息 提示 框 


(2) 关闭 消息 提示 框 


加 微 信 小 程序 开发 零 基 础 入 | 


(a) 显示 消息 提示 框 (b) 关闭 消 恩 提 示 框 
图 11-1 消息 提示 框 的 简单 应 用 


11.1.2 ”加 载 提示 框 


显示 加 载 提示 框 
小 程序 使 用 wx.showLoading(OBJECT) 显 示 加 载 提 示 框 , 该 接口 从 基础 库 1.1.0 开始 支持 ， 
低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 11-2 所 示 。 


表 11-2 wx.showLoading(OBJECT) 的 参数 


2 页 

title 提示 的 内 容 

mask 征 否 显示 透明 遮 单 层 ， 防 止 触 摸 穿 透 ， 默 认 信 为 false 
success() 接口 调用 成 功 的 回调 函数 

failO 接口 调用 失败 的 回调 函数 

completeO) 接口 调用 结束 的 回调 函数 (调用 成 功 与 吾 部 执行 


注意 : 这 种 提示 框 不 会 自动 消失 ， 需 主动 调用 wx.hideLoadingO 才 能 关闭 提示 框 。 


wxX.showLoading(OBJECT) 示 例 代 人 码 如 下 : 


1 。 wx.showLoadinglt 


title: 加载 中 ， 


bY 


3. 1}) 


上 述 代码 的 引号 中 的 文字 内 容 可 由 开发 者 自 定义 。 
关闭 加 载 提示 柜 
小 程序 使 用 wx.hideLoading0 关 闭 加 载 提示 框 ， 该 接口 从 基础 库 1.1.0 开始 支持 ， 低 版 本 
需 做 兼容 处 理 。 
wx.hideLoading0 示 例 代码 如 下 : 


2 了 微 信 小 程序 开发 零 基础 入 门 


1. setTimeout (function()})ft 
pa wx.hideLoadindgl() 
3 |r .20007 


上 述 代 码 表 示 在 两 秒 内 关闭 提示 框 。 
【 例 11-2】 界面 API 之 加 载 提示 框 的 简单 应 用 
WXML (pages/demo0l/loading/loading.wxml) 文件 代码 如 下 : 


TT 1. <view class='title'>1 .交互 反馈 -加 载 提 示 杠 的 简 持 应 用 </view> 
视频 讲解 

2. <View Class='demo—box'> 
人 <View class='title'>(1) 显示 加 载 提 示 框 </view> 
4. <button tvype="primary™ bindtap="showLoading"> 评 不 Loading</button> 
5. </view> 
6. <view Class='demo—box'> 
i <view class='title'>{(2) 头 闭 加 载 提 示 杠 </view> 
2 <button type=" "primary” bindtap="hideLoading"> 关 闭 Loading</button> 
9. </view> 


JS (pages/demo01/loading/loading.js) 文件 代码 如 下 : 


1. Page (1{ 

过 二 showLoading: function() I 
Er wxX.ShowLoadinglt1 

J title: 'Hello World! " 
3 }) 

6. 上 7 

a hideLoading: function() 1{ 
8. wx.hideLoadingl() 

和 } 

10.1) 


运行 效 末 如 图 11-2 所 示 。 
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第 11 草 界面 API 第 11 章 界面 API 
1. 交互 反馈 -加 载 提示 框 的 简单 应 用 1 交互 反馈 -加 载 提 示 框 的 简单 应 用 


(1) 显示 加 载 提示 框 (1) 显示 加 载 提示 框 


(2) 关闭 加 载 提示 框 


Hello Vorld ! 属 微 信 小 程序 开 败 零 基 础 入门 


(a) 显示 加 载 提示 框 (b) 关闭 加 载 提示 框 


图 11-2 ”加 载 提示 框 的 简单 应 用 


第 11 章 界面 API 


【 代 人 码 襄 明 】 
本 示例 在 loading.wxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 显示 和 关闭 加 载 提 示 框 ， 对 
应 的 目 定义 函数 分 别 是 showLoadingO0 和 hideLoadingO0。 在 loading.js 中 定义 showLoading0 方 


法 用 于 显示 一 个 带 有 加 载 动画 效果 的 提示 框 ， 其 文字 内 容 是 “Hello Worldl1”，hideLoading0 


方法 用 于 立刻 隐藏 提示 框 。 
在 图 11-2 中 ， 图 (a) 为 单 击 “ 显 示 Loading” 近 钮 后 的 效 末 ， 此 时 提示 框 将 出 现 并 无 法 
自动 消失 ;图 (b) 是 单 击 “ 关 闭 Loading” 按 钮 后 的 效果 ， 此 时 提示 框 将 被 关闭 。 


11.1.3” 梗 态 踢 窗 
小 程序 使 用 wx.showModal(OBJECT) 显 示 模 态 弹 窗 , 其 OBJECT 参数 说 明 如 表 11-3 所 示 。 


表 11-3 wx.showModal(OBJECT) 的 参数 


CE 砚 
content 起 提示 的 内 容 
showCancel 是 否 显 示 取 消 按 钮 ， 默 认为 true 
cancelText sting | 否 | 取消 按钮 的 文字 ， 默 认为 "取消 "， 最 多 4 个 字 得 
cancelColor 取消 按钮 的 文字 着 色 ， 上 默认 为 "#000000" 
confirmText sting | 否 确定 按钮 的 文字 ， 默 认为 "确定 "， 最 多 4 个 字符 
confirmColor 确定 按钮 的 文字 颜色 ， 默 认为 "#3cc51f" 


Ij| 到 | 苔 | 本 | 讶 | 舌 


让 


[| 
success() 合 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 
completeO) 盏 接口 调用 结束 的 回调 图 数 《〈 调 用 成 功 与 否 都 会 执行 ) 


其 中 successO 返 回 参 数 的 说 明 如 表 11-4 所 示 。 


表 11-4 success() 返 回 参 数 
CE 要 低 版 厅 
confirm 当 为 true 时 表示 用 户 单 击 了 “确定 ”按钮 


ed 和 当 为 true 时 表示 用 户 单 击 了 “取消 ”按钮 (用 于 Android 系统 ee 
四 “| 区 分 单 击 遮 重 层 关闭 还 是 单 击 “ 取 消 ” 按 钮 关闭 ) 和 


【 例 11-3】 界面 API 之 模 态 弹 窗 的 简单 应 用 
WXML (pages/demo01/modal/modal.wxml) 文件 代码 如 下 : 


. <View class='title'>1. 交 互 反 人 馈 - 模 态 弹 窗 的 简单 应 用 </view> I 
- <VIiew Class=" demo—box'> 

<view class='title'>(1) 有 “取消 ”按钮 的 模 态 弹 窗 </view> 视频 讲解 
<button type=" "primary” bindtap="showModall"> 显 不 Modal</button> 

. </view> 

- <VIiew Cass= demo—box'> 

<view class='title'>(2) 无 “取消 ”按钮 的 模 态 弹 窗 </view> 

<button type="primary™ pindtap="showModal2"> 显 示 Modal</button> 

- </vVview> 


(DD 于] 


JS (pages/demo01/modalmodalwxml) 文件 代码 如 下 : 


| 一 


. Padgde (1{ 
2 showModall:function()t 


28/ 


区 1 微 信 小 程序 开发 零 基础 入 门 


3 wx.ShowModal (1{ 

I eol 

5. content: "这 是 一 个 模 态 弹 窗 (有 “取消 ”按钮 )"， 
6. SUCCeSS: function (res) I 

了 if {res.confirm} I 

8 


console.1og("'"“ 人 确定 ”按钮 被 单 击 ') 


2 } else if (res.cancel) | 

10: console.1log(! “取消 ” 按 钮 被 单 击 ') 
下 下 } 

有 } 

13. }) 

14. }, 


15. showModal2: functiont() f 
16. wiX.ShowModal l(t 


ly Enele Tp 

18. content: ' 这 是 一 个 模 态 弹 窗 (无 “取消 ”按钮 》'， 
Ls showCancel:false 

20 - }) 

pl 

22 .1}) 


运行 效果 如 图 11-3 所 示 。 
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(a) 页 面 初 始 效 果 (b) 有 取消 按钮 效果 


Console Sources Network Security Audits 
top VY Filter 


取消 授 钮 被 点 击 


了 
确定 按钮 被 点 击 


(d) Console〈 控 制 台 ) 的 输出 内 容 
图 11-3 ” 模 态 弹 窗 的 简单 应 用 


"fi "a 
eh33 


便 晤 CEMG 


(c) 无 取消 按钮 效果 


Storage 


AppData 


Defa 
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【代码 说 明了】 

本 示例 在 modal.wxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 显示 有 无 取消 按钮 的 模 态 弹 
窗 , 对 应 的 目 定义 图 数 分 别 是 showModal10 和 showModal20。 在 modaljs 中 定义 showModall0) 
方法 用 于 显示 一 个 带 有 取消 和 确定 按钮 的 模 态 弹 窗 ; showModal20 方 法 用 于 一 个 只 带 有 确定 
按钮 的 模 态 弹 窗 。 

在 图 11-3 中 ， 图 〈a) 为 页 面 和 初始 效果 ; 图 (b) 为 早 击 第 一 个 按钮 后 的 效果 ; 图 〈c) 
古里 击 第 二 个 按钮 后 的 效果 ; 图 (d) 为 分 别 丫 击 取消 和 确定 按钮 后 Console 控制 从 输出 的 内 
容 ， 由 该 图 可 见 模 态 弹 窗 的 按钮 单 击 可 以 被 监听 到 。 


11.1.4 ”操作 有 亲 单 


小 程序 使 用 wx.showActionSheet(OBJECT) 显 示 从 底部 浮 出 的 操作 菜单 , 其 OBJECT 参数 
说 明 如 表 11-5 所 示 。 


表 11-5 wx.showActionSheet(OBJECT) 的 参数 


参数 说 了 明 

itemList 按钮 选项 的 文字 数组 ， 数 组 长 度 最 大 为 6 个 
itemColor 1 按钮 选项 的 文字 颜色 ， 上 默认 为 "#000000" 

success() 接口 调用 成 功 的 回调 函数 ， 详 见 其 返回 参数 说 明 
fail| 接口 调用 失败 的 回调 函数 

completeO Fncion | 否 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 ) 


其 中 successO 返 回 参 数 的 说 明 如 表 11-6 所 示 。 
表 11-6 success() 返 回 参 数 
参数 说 明 
tapIndex 用 户 单 击 的 按钮 从 上 到 下 的 顺序 ， 从 0 开始 
【 例 11-4】 界面 API 之 操作 菜单 的 简单 应 用 
WXML (pages/demo01l/acttonsheet/actionsheet.wWwxml ) 文件 代码 如 下 : 


阁 I 


| 


uy 


I 


, 1. <view class='title'>1 .交互 反馈 -操作 有 菜单 的 简单 应 用 </view> 
; <Vliew Class='demo—box'> 
视频 讲解 3 <Vlew Class='title' > 显示 操作 麻 蛙 </view> 
4. <buttontype="primary" bindtap-"showActionSsheet"> 显 未 ActionSsheet</button> 
5. </view> 


JS (pages/demo01l/actionsheetactionsheetjs) 文件 代码 如 下 : 


1. Page l(t{ 

2 showActionSheet: functiont() I1 

3 wxX.ShowActionSsheet (1 

= itemList: [MenuO0l', MenuO02, -Menuab3 | ， 
2 SUCCeSS: function (res) I 

6 console.l1og (res.taplIndex) 

1 

8 


}r 
fail: function(res) 1 
加 COnSDJe -Tog (IEeS -eeTMs 可 | 
10. } 
Ls } ) 
12。 


元] 微 信 小 程序 开发 零 基础 入 门 


运行 效 末 如 图 11-4 所 示 。 
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显示 操作 某 单 


心 微 信 小 程序 开发 零 基础 入 门 


Menu01 
Menu02 
Menu03 
取消 

(a) 页 面 初始 效果 : Cb) 单 击 弹出 操作 菜单 


Console Sources Network Security Audits Storage AppData 


top 了 Filter Defal 


(c) 选择 Menu01 选项 后 Console 控制 台 的 输出 内 容 


Console Sources Network Security Audits Storage 


top 了 Filter 


showActionsheet:fail cancel 


(d) 选择 取消 选项 后 Console 控制 台 的 输出 内 容 
11-4 ”操作 荣 单 的 简单 应 用 


【代码 说 明 】 

本 示例 在 actionsheet.wxml 中 包含 了 一 个 <button> 按 钮 用 于 显示 操作 且 单 ， 对 应 的 目 定义 
国 数 是 showActionSheet()。 在 actionsheet.js 中 定义 showActionSheetO 方 法 用 于 显示 一 个 市 有 
Menu01、Menu02 和 Menu03 选项 的 操作 菜单 。 

在 图 11-4 中 ， 图 (a) 为 页 面 初 始 效 果 ; 图 (b) 为 单 击 按钮 后 弹出 集 单 的 效果 ; 图 (c) 
定单 击 第 一 个 选项 Menu01 后 Console (控制 台 ) 输出 的 内 容 ， 由 设 图 可 见 选 项 是 从 0 开始 计 
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数 的 ; 图 (d) 为 单 击 取消 按钮 后 Console 控制 台 输 出 的 内 容 ， 用 户 也 可 以 单 击 其 他 空 日 区 域 


11.2.1 ”当前 页 面 标题 设置 


小 程序 使 用 wx.setNavigationBarTitle(OBJECT) 动 态 设 置 当 前 页面 的 标题 ， 其 OBJECT 参 
数 说 明 如 表 11-7 所 示 。 


表 11-7 wx.setNavigationBarTitle(OBJECT) 的 参数 


参数 说 上 明 


title0 页 面 标题 

success( 否 接口 调用 成 功 的 回调 函数 

fail0 否 接口 调用 失败 的 回调 函数 

complete() 合 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 ) 


wxX.setNavigationBarTitle(OBJECT) 示 例 代 人 码 如 下 : 


1 。 wx.SetNavigationBarTitlellt! 


2 万 it1le: 当前 页 面 ， 
3. }) 
其 中 title 的 值 可 以 由 开发 者 日 定义 。 tt 
【 例 11-S】 界面 API 之 设置 导航 条 标题 的 简单 应 用 "> 
WXMIL (pages/demo02/title/title.wxml〉 文 件 代 人 码 如 下 : 3 ee. 
1. <view Class="title’'»>?2 .导航 条 设置 -标题 的 简单 应 用 </view> nn 
2. <View Class='demo box'> 视频 计 解 
3. <view class='title'> 人 设置 导航 条 标题 </view> 
4. <input type='text" placeholder=" 请 输入 目 定 义 的 导航 条 标题 ， bindinput= 


'titleInput'></input> 
ee <button type="primary™ pindtap"setTitle"> 设 置 标题 </button> 
6. </view> 


JS (pages/demo02/title/title.js〉 文件 代码 如 下 : 


1. Page l(t{ 

wa data: I 

区 Lp I 网 = 

全 全 }, 

pe titlelInput: functiont(e} { 

6 - this.setData({title:e.detail.valuel}) 
本 }, 

3. setTitle: function() I{ 

Oe let title=this.data.titles 
10. wxX.SetNavigationBarTitlel(t 
有 攻 title: title 

二 }) 

13. 1 
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i 人 Wi 
运行 效果 如 图 11-5 所 示 。 
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2. 导航 条 设置 -标题 的 简单 应 用 


设置 导航 条 标题 设置 导航 条 标题 


请 输入 目 定 义 的 导航 条 标题 


名 微 信 小 程序 开 友 零 基 础 入 | ] 


名 微 信 小 程序 开发 堆 基 础 入 门 


(a) 页 面 初始 效果 (b) 单 击 设 置 寻 航 条 标题 
图 11-5 ”设置 寻 航 条 标题 的 简单 应 用 

【代码 说 明 】 

本 示例 在 tide.wxml 中 包含 了 一 个 <input> 输 入 框 用 于 录入 自 定义 标题 ， 对 应 的 自 定义 函 
数 是 tideInput0; 以 及 一 个 <button> 按 钮 用 于 更 新 当前 页 面 的 导航 条 标题 ,对 应 的 自 定义 函数 
是 setTitle0。 在 titlejs 中 定义 titleInput0 方 法 用 于 实时 更 新 输入 框 中 的 内 容 ; 定义 showTitle0 
方法 获取 标题 内 容 并 显示 出 来 。 

在 图 11-5 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 输入 新 标题 后 单 击 “ 设 置 标题 ”按钮 
的 效果 ， 由 该 图 可 见 此 时 顶端 标题 更 新 为 输入 框 中 的 文本 内 容 。 


11.2.2 ”导航 条 加 载 动 画 


小 程序 分 别 使 用 wx.showNavigationBarLoadingO0 和 wx.hideNavigationBarLoadingO 在 当前 
:F 页 面 显 示 或 隐藏 寻 币 条 加 载 动画 。 
【 例 11-6】 再 面 API 之 导航 条 加 载 动画 的 简单 应 用 
WXML (pages/demo02/loading/loading.wxml) 文件 代码 如 下 : 


-5 ms 
。 1. <view class='title'>2. 导 航 条 设置 -加载 动 画 的 简单 信用 </view> 
视频 讲解 2. <view class='demo-box'> 


3 <view class='title'>(1) 显示 导航 条 加 载 动 画 </view> 


<button type="primary™” bindtap="showLoading" > 显示 加 载 动 男 </button> 
5- </view> 


bo. <Vview Class='demo—box'> 
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=-] 


<View Class="'title'> (2) 关闭 导 骨 条 加 载 动 画 </view> 
<button type="pIrimary” bindtap"hideLoading"> 关 闭 加 载 动 画 </button> 
9. </view> 


Co 


JS (Pages/demo02/loading/loading.js) 文件 代码 如 下 : 


1 Page ll 

Wa showLoading: functiont() I 

3 wiX.ShowNavigationBarLoading () 
< 上 ， 

hideLoading: function() 1{ 

6 wxXx.hideNavigationBarLoading'() 
人 } 

8 . |1}) 


运行 效 末 如 图 11-6 所 示 。 
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(1) 显示 导航 条 加 载 动画 (1) 显示 导航 条 加 载 动 画 


(2) 关闭 导航 条 加 载 动 画 (2) 关闭 导航 条 加 载 动画 


关闭 加 载 动 画 


上 加 微 信 小 程序 开发 零 基础 入 门 局 微 信 小 程序 开发 零 基础 入 门 


(a) 显示 导航 条 加 载 动画 (b) 关闭 寻 航 条 加 载 动画 
图 11-6 ”导航 条 加 载 动画 的 简单 应 用 

【代码 说 明 】 

本 示例 在 loading waml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 显示 和 取消 导航 条 加 载 动画 ， 
对 应 的 目 定 义 图 数 分 别 是 showLoadngO0 和 hideLoadingO。 在 loading.js 中 定义 showLoadingO 
方法 用 于 在 导航 条 标题 元 侧 显示 一 个 加 载 动 男 效果 : 定义 hdeLoadingO 方 法 用 于 隐 噬 动画 效 
果 ， 显 示 原 先 静 态 的 导航 条 标题 。 

在 图 11-6 中 ， 图 (a) 为 蛙 击 第 一 个 按钮 后 的 效果 ， 此 时 加 载 动画 出 现 ; 图 (b) 古音 击 
第 二 个 按钮 后 的 效果 ， 此 时 加 载 动 男 消 失 。 


11.2.3 ”导航 条 颜色 设 


小 程序 使 用 wxX.setNavigationBarColor(OBJECT) 设 置 导 航 条 颜色 ， 该 接口 从 基础 库 1.4.0 


ph 
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开始 支持 ， 低 版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 11-8 所 示 。 


表 11-8 wx.setNavigationBarColor(OQBJECT) 的 参数 
参数 说 明 
前 景 颜 色 值 ， 包 括 按钮 、 标 题 、 状 态 栏 的 颜色 ， 仅 支 
持 #ffFffF 和 #000000 (不 支持 颜色 单词 或 缩写 成 #ff 的 
形式 ) 
backeroundColor 背景 颜色 值 ， 有 效 值 为 十 六 进 制 颜色 
animation 动画 效果 
animation.duration ”Number |  ” 否 | 动画 变化 时 间 ， 轩 认 信 为 0， 单 位 为 室 秒 


animation timingFune 动画 变化 方式 ， 默 认 值 为 linear 


0 接口 调用 成 功 的 回调 函数 ， 返 回 String 类 型 参数 
success() Function errMsg 表示 调用 结果 


failO 接口 调用 失败 的 回调 函数 


Pi 


frontColor 


Dj | 谎 


I | 车 | 菩 


I 


complete0 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 ) 


animation.timingFunc 的 有 效 全 如 下 。 

。 linear: 动 男 从 头 到 尾 的 速度 是 相同 的 。 

e easeIn: 动画 以 低速 开始 。 

e easeOut: 动画 以 低速 结束 。 

e easeInOut: 动画 以 低速 开始 和 结束 。 
wx.setNavigationBarColor(OBJECT) 示 例 代 码 如 下 : 


1 。 wx.sSetNavigationBarColor (1{ 

汪汪 frontcColor: "#f£fffff". 

有 backgroundColor: "#ff0000", 
4. animation: 1 

duration: 400 ， 

6. timingFunc: "easeln" 

Fe } 

8. +) 


【 例 11-7】 表面 API 之 导航 条 颜色 的 简单 应 用 
WXML (pages/demo02/colorcolor wxml) 文件 代码 如 下 : 


<view class='title'>2 .导航 条 设置 - 赢 色 的 简单 应 用 </Vview> 
<View Class= qdemo 一 boX > 
<view class='title'> 设 十 导航 条 闫 色 </view> 
<button type="primary™ pindtap 一 "setColor">»> 设 直 闫 色 </button> 


户 tl 畏 


5. </viewy> 


JS (pages/demo02/color/color.js〉 文 件 代 人 如 下 : 


- Page (i 
setColor:functiont(})i 
wx.SetNavigationBarColor (1! 
frontColor: "#000000°", 
backgroundColor: "#f£fff", 
animation: 1{ 
duration: 2000, 
timingFunc: "easelInOut" 
} 
}) 


PO. 
CE] 
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运行 效果 如 图 11-7 所 示 。 
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_ 设 杆 “机 条 产 包 四 “2 加 


“EE 
置 颜色 


名 微 信 小 程序 开发 零 基 础 入 门 加 微 信 小 程序 开发 零 基 础 入 门 


(a) 页 面 初始 效果 (b) 单 击 更 新 寻 航 条 颜色 
11-7 ”导航 条 颜色 的 简单 应 用 


【代码 说 明 】 

本 示例 在 color.wxml 中 包含 了 一 个 <button> 按 钮 用 于 更 新 当前 页 面 的 导航 条 颜色 ， 对 应 
的 自 定 义 函 数 是 setColor0 。 在 colorjs 中 定义 showColor0 方 法 在 两 秒 的 过 程 中 动态 泻 染 颜色 
变化 ， 并 且 动 画 以 低速 开始 和 结束 。 

在 图 11-7 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 顶端 导航 条 是 黑 底 白字 样式 ; 图 (b) 为 单 
击 “ 设 置 凑 色 ” 按 钮 更 新 导航 条 颜色 后 的 效果 ， 由 该 图 可 见 此 时 导航 条 变 为 白 底 黑 字 。 


11.3.1 tabBar 标记 


设置 tabBar 标记 

小 程序 使 用 wx.setTabBarBadge(OBJECT) 为 tabBar 菜 一 项 的 右上 和 角 添 加 文本 ， 访 接口 从 
基础 库 1.9.0 开始 文 持 ， 低 版 本 需 做 羔 容 处 理 。 

其 OBJECT 参数 说 明 如 表 11-9 所 示 。 
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表 11-9 wx.setTabBarBadge(OBJECT) 的 参数 
参数 说 明 
index tabBar 的 哪 一 项 ， 从 左边 算 起 ， 从 0 开始 计数 
text sving | 是 ”| 品 示 的 文本 ， 超 过 3 个 字符 则 蝇 示 成 <” 
success() 接口 调用 成 功 的 回调 函数 
failO ”Function | ” 否 | 接口 调用 失败 的 回调 函数 


complete() Fuction | 否 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 》 


wx.setTabBarBadge(OBJECT) 示 例 代 公 如 下 : 


Pi 


Dj 让 | 各 


到 


下 


- WX.SetTabBarBadoge ({ 
index: 1, 
上 


心 Lu iu 靖 


= 


上 述 代 码 表 示 将 左 起 第 二 项 的 右上 角 退 加 数字 1。 
移 除 tabBar 标记 


小 程序 使 用 wx.removeTabBarBadge(OBJECT) 移 除 tabBar 车 一 项 右上 角 的 文本 ， 访 接口 


从 基础 库 1.9.0 开始 文 持 ， 低 版 本 需 做 兼容 处 理 。 
其 OBJECT 参数 说 明 如 表 11-10 所 示 。 


表 11-10 wx.removeTabBarBadge(OBJECT) 的 参数 


CE 砚 
index tabBar 的 哪 一 项 ， 从 左边 算 起 ， 从 0 开始 计数 
successO 接口 调用 成 功 的 回调 函数 

fail0 接口 调用 失败 的 回调 函数 

complete() 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 》 


wx.removeTabBarBadge(OBJECT) 示 例 代 但 如下: 


Pi 


囊 


囊 


囊 


wxX.removeTabBarBadge ({ijndex: 01}) 


上 述 代码 表示 将 左 起 第 一 项 的 右上 角 文本 移 除 。 
11.3.2 tabBar 红 点 


显示 tabBar 红 点 


小 程 夺 使 用 wx.showTabBarRedDot(OBJECT) 显 示 tabBar 条 一 项 的 右上 角 有 的 红 点 , 该 接口 


从 基础 库 1.9.0 开始 文 持 ， 低 版 本 需 做 莱 容 处 理 。 
其 OBJECT 参数 说 明 如 表 11-11 所 示 。 


表 11-11 wx.showTabBarRedDot(OBJECT) 的 参数 


参数 说 明 

index ”Number | 是 | tabBar 的 哪 一 项 从 左边 算 起 ， 从 0 开始 计数 
success() 了 接口 调用 成 功 的 回调 函数 

oild 接口 调用 天 败 的 回调 函 歼 


completeO) 接口 调用 结束 的 回调 函数 (调用 成 功 与 理 虱 执行 》 


世 | 血 


I 


| 
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隐藏 tabBar 红 点 

小 程序 使 用 wx.hideTabBarRedDot(OBJECT) 隐 藏 tabBar 条 一 项 的 右上 和 角 的 红 点 ， 该 接口 
从 基础 库 1.9.0 开始 文 持 ， 低 版 本 需 做 兼容 处 理 。 

其 OBJECT 参数 说 明 如 表 11-12 所 示 。 


表 11-12 wx.hideTabBarRedDot(OBJECT) 的 参数 


参数 说 _ 明 
index tabBar 的 哪 一 项 ， 从 左边 算 起 ， 从 0 开始 计数 


Pi 


successO 接口 调用 成 功 的 回调 函数 
failO 否 接口 调用 失败 的 回调 函数 
complete() 合 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


11.3.3 onTabltemTap() 


人 在 小 程序 中 , 单 击 tabBar 中 的 任 一 tab 时 部会 触 友 onTabItemTap(item), 该 隶 数 从 基础 库 
1.9.0 开始 文 持 ， 低 版 本 需 做 兼容 处 理 。 
onTabItemTap(item) 示 例 代 人 如 下 : 


To pagell 

了 onTabltemTap (item) { 

3 console.l1ogl(item.1index) /1 页面 序 写 ， 表示 第 几 个 tab 
4. console.log(item.pagePath) /7/ 页 面 路 径 地 址 
console.]log (item.text) / /页 面 文 本 内 容 

e . } 

J 


11.3.4 设置 tabBar 样式 


设置 tabBar 整体 样式 

小 程序 使 用 wx.setTabBarStyle(OBJECT) 动 态 设 置 tabBar 的 整体 样 趟 ， 访 接口 从 基础 库 
1.9.0 开始 支持 ， 低 版 本 需 做 兼容 处 理 。 

其 OBJECT 参数 说 明 如 表 11-13 所 示 。 


表 11-13 ”wx.setTabBarStyle(OBJECT) 的 参数 


color tab 上 文字 的 默认 颜色 


参数 说 肯 
KxCo 

selectedColor tab 上 的 文字 选中 时 的 颜色 
backeroundColor tab 的 背景 色 
borderStyle tabBar 上 边框 的 颜色 ， 仅 文 持 black、white 
success() 接口 调用 成 功 的 回调 函数 
后 口 调 用 天 履 的 回调 函 玫 
complete0 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 ) 


wx.setTabBarStyle(OBJECT) 示 例 代 人 码 如 下 : 


1. wx.sSetTabBarSstyler(l 

2 coOlor: "#ff0000"., 

汪汪 selectedColor: ‘#00ff00°, 

4 backgroundColor: "#0000ff", 


微 信 小 程序 开发 零 基础 入 门 


i borderSstyle: ‘white'’ 
6. 1) 


设置 tabBar 单项 样式 

小 程序 使 用 wx.setTabBarItem(OBJECT) 动 态 设 置 tabBar 某 一 项 的 内 容 ， 该 接口 从 基础 库 
1.9.0 开始 文 持 ， 低 版 本 需 做 兼容 处 理 。 

其 OBJECT 参数 说 明 如 表 11-14 所 示 。 


表 11-14 ”wx.setTabBarltem(OBJECT) 的 参数 


参数 EI 说 有 明 
index tabBar 的 哪 一 项 ， 从 左边 算 起 
text String 盏 tab i 


0 ee = 图 片 路 径 ,icon 大 小 限制 为 40KB, 建议 尺寸 为 81pxX 81px， 
| - ”| 当 position 为 top 时 此 参数 无 效 ， 它 不 支持 网 络 图 片 

于 选中 时 的 图 片 路 径 ，icon 大 小 限制 为 40KB， 建 议 尺 寸 为 
selectedIconPath String 


81 X81px， 当 position 为 top 时 ， 此 参数 无 效 
success() 接口 调用 成 功 的 回调 函数 


tailO 接口 调用 失败 的 回调 函数 


complete0 否 。 “| 接口 调用 结束 的 回调 函数 〈 调 用 成 功 与 否 都 执行 ) 
wx.set TabBarItem(OBJECT) 示 例 代 人 码 如 下 : 


. WX.SetTabBarItemlt 

index: 0, 

text: text', 

iconPath: ‘'/path/to/iconpPath', 
selectedIconPath: '/path/to/selectedIconpPath' 


i 


}) 


11.3.5 ”显示 与 隐藏 tabBar 


于 未 tabBar 
小 程 厅 使 用 wx.showTabBar(OBJECT) 显 示 tabBar， 访 接口 从 基础 库 1.9.0 开始 文 持 ， 低 
版 本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 11-15 所 示 。 


11-15 wx.showTabBar(OBJECT) 的 参数 
参数 说 有 明 
animation i 是 否 需 要 动画 效果 ， 默 认 无 
Success 人 Fuction | 否 接口 调用 成 功 的 回调 函数 
fail0 ”Fuction |  ” 否 | 接口 调用 失败 的 回调 函数 
complete0 | Function | 和 理 | 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


隐藏 tabBar 
小 程序 使 用 wx.hideTabBar(OBJECT) 隐 藏 ttbBar， 该 接口 从 基础 库 1.9.0 开始 支持 ， 低 版 
本 需 做 兼容 处 理 。 其 OBJECT 参数 说 明 如 表 11-16 所 示 。 


吧台 


ID 


I 
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表 11-16 wx.hideTabBar(OBJECT) 的 参数 


参数 说 了 明 


anlmation 合 征 侣 需要 动 男 效 果 ， 默 认 无 
success() Function 接口 调用 成 功 的 回调 函数 
fail() 否 接口 调用 失败 的 回调 函数 


4 


completeO 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 剖 执行) 


【 例 11-8】 表面 API 之 设置 tabBar 的 综合 应 用 
本 示例 将 用 于 展示 本 节 所 学 的 tabBar 的 各 种 设置 方式 ， 包 括 如 下 内 容 : 
tabBar 的 右上 角 文 本 设置 ; 


卫 


。 tabBar 的 石上 角 红 后 设置 ; 


e tabBar 的 样式 讽 置 ; 

etabBar 有 的 显示 与 隐 着 效 果 。 

自 先 毅 要 在 app.json 文件 中 声明 tabBar 结构 , 本 示例 选择 妙 示 两 个 页 面 , 即 育 页 和 tabBar 
例题 页 面 。app.json 文件 代码 如 下 : 


二 

ee “七 abpBar : { 

3 "TOLor™=: "#000™, 

4. "selectedColor™: "#1laadl9™, 

ee -st 

6. { 

ee "pagePath": "pages/index/index", 

9 "iconPath": "images/demo03/house .png™, 

Ns "selectedIconPath": "images/demo03/house green.png™"r 
10. "ext": “上 自 岁 " 

EE }, 

| 

he "pagePath": "pages/demo03/tabBar/tabBar"™., 

14. "iconPath": "images/demo03/star.png", 

Ly "selectedIconPath™": "images/demo03/star green.png™ 
L606. "text": "tabBar 例题 " 

Li } 

18. ] 

1 } 

20. } 


食 


tabBar 人 例题 


图 11-8 tabBar 的 简单 设置 效果 


其 中 首页 是 本 章 全 部 例题 的 目录 页 ，tabBar 例题 页 面 是 本 示例 的 主要 运行 页 面 。 
WXMI (pages/demo03/tabBar/tabBar.wxml) 文件 代 公 如下: 


-view Class="title'Ss3. Tabpar WE</VvIiews> 

. <Vliew Cass= qdemo 一 DoX > 

<View class='title'>(1) 右 上 上 角 艾 本 设 填 < /view> 

<button type=" "primary” SiZe="mini’ bindtap="setText"> 交 加 区 本 </button> 
<button type="primary™" Size="'mini'" bjindtap=rremoveTextn”> 取 清文 本 < /button> 
. </view> 

. <Vlew Class="'demo—box'> 


下 
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:人 

<button type="primary™ Size="'mini'’ bindtap 一 "showRedDot"> 添 加 红 点 </button> 
lO0. <button type="primary™” Size= "mini" bindtap="hideRedDot "> 取消 红 点 </button> 
11.</view> 

1l2.<view Class="'demo—box'> 

13. <view class="'title'>(3})tabBar 样式 设置 </view> 

14. <button type=" "primary” SiZe—" mini’ bindtap-"setBarstyle"> 整 体 设 置 </button> 
12。 <button type="pPrimary™” SizZe= "mini’ bindtap"setColor"> 单 项 设置 </button> 
16.</viewy> 

li.<vwiew Class=" demo—box'> 

18. <view class='title>(4ytabBar 的 显示 与 隐藏 </vjiew> 

13. <button type=mprimaryv” size="mnini binadap="showTabBarn"> 下 示 tabBar</button> 
20. <button type="PpPIrimary” SizZe~—"mini’ bindtap="hideTabBar"> 隐 藏 上 abBar</button> 
了 1 .</view> 


WXSS (pages/demo03/tabBar/tabBar.wxss) 文件 代码 如 下 : 
1 。 buttontf 


a margin: lO0rpx; 
3 


JS (pages/demo03/tabBartabBarjs) 文件 代码 如 下 : 


1. Page ({ 

2. // 设 置 文本 

setText: function() 1 

4. wxX.SetTabBarBadge ({ 

i index: 1l1,， 

避 - 下 已 入 在 2 “HI” 

7. }) 

8. }, 

9. // 取 消 文 本 

10。 removeText: function() 1({ 
11. wxX.removeTabBarBadogqe (1 
下 二: lndex: 1 

13. }) 

14. }, 


15. // 显 示 红 凡 
16. showRedDot: function() I 


有 wX.ShowTabBarRedDot (1 
1B. index: 1]1,， 

193. }) 

20. 上， 


21. // 隐 咱 红 所 

22. hideRedDot: function() 1 
起 wxXx.hideTabBarRedDot ({ 
:We 1ndex: 1]1,， 

a }) 

20。 } F 

27. // 设 置 tabBar 整体 样式 


28. setBarSstyle: function() 1{ 


a a wx.SetTabBarStyle(l 

30. coOLor: "#ff0000°", 

了 1 selectedColor: "#0000ff" 
人 }) 

站 


34. // 设 置 tabBar 单项 样式 

39- SetBarltemStyle: functiont(} | 
36. WX. SetTabBarlitemlt1 

动人 二 lilindex: 1], 
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38. text: '" 自 页 "， 

39. iconPath: '/images/demo03/house.png', 

40. selectedLlconpath: /images/demo03/house green- png” 
41. }) 

42. 上 


43. // 还 原 tabBar 样式 
44. resetBRBarSstyle: function() { 


495. WX.SetTabBarIiteml(l 

46. index: 1, 

417. text: tabBar 例题 '， 

48. iconPath: '/images/demo03/star.png', 
49. selectedIconPath: '/images/demo03/star green.png' 
20. }) 

省 wxXx.SetTabBarSstylel(l 

CoOlor: "#000000", 

号 < selectedColor: '#laadl19' 

上 上) 

35- 1 


56. /显示 tabBaE 

57。 ShowTabpBar: functiont(t) 1{ 
DB - wx.ShowTabBar({}) 

3 

60. // 阅 减 tabBar 

6l1. hideTabBar: function() I 
2 wxX.hideTabBar({}) 


运行 效果 如 图 11-9 所 示 。 
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(4)jtabBar 的 显示 与 隐藏 


@ 微 信 小 程序 开发 零 基础 入 门 Sg 


合 磺 
首页 tabBar 例 是 


(b) 添加 右上 角 红 后 效 果 


图 11-9 ”设置 tabBar 的 综合 应 用 


:个 微 信 小 程序 开发 零 基础 入 门 


重生 生生 WeChat 全 11:10 100% [国宝 


例题 DEMO TT (®) 


第 11 草 界面 API 
3. tabBari& 置 


(了 DD) 右上 角 文本 设置 


(2) 右 上 角 红 点 设置 


(3)tabBar 样 式 设置 


(4)jtabBar 的 显示 与 隐藏 
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| | | 
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(f) 显示 tabBar 


图 11-9( 续 ) 
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【 代 人 码 襄 明 】 

本 示例 在 tabBarwxml 中 包含 了 4 组 有 邓 例 ， 开 为 每 组 配置 了 两 个 <button> 按 钮 。 第 1 组 对 
应 鸭 目 定义 函数 是 setIextO0 和 removeTextO0， 分 别 用 于 显示 和 隐藏 tabBar 的 右上 角 文 本 ; 第 2 
组 对 应 的 目 定义 函数 是 showRedDotO0 和 hideRedDotO0， 人 分别 用 于 旺 示 和 隐 疙 tabBar 的 右上 角 
红 点 ; 第 3 组 对 应 的 目 定 义 图 数 是 setIabBarStyle0 、setBarItemsStyleO 以 及 resetTabBarStyle0)， 
分 别 用 于 设置 tabBar 的 整体 样式 、 单 项 样式 以 及 还 原 最 初 样式 ; 第 4 组 对 应 的 目 定 义 函 数 是 
showTabBarO 和 hideTabBar0， 分 别 用 于 旺 示 和 隐 首 整个 tabBar。 

在 图 11-9 中 ， 图 Ca) 和 图 (b) 为 添加 右上 和 角 文 本 和 红 点 效果 ; 图 (c) 和 图 (d) 是 整 
体 和 单项 样式 设置 效果 ; 图 (e) 和 图 (f) 为 隐藏 和 显示 整个 tabBar 效果 。 


11.4.1 ” 跳 转 到 新 页 面 


小 程序 使 用 wx.navigateTo(OBJECT) 保 留 当 前 页 面 ， 并 在 当前 页 面 上 方 打 开 应 用 内 指定 
的 新 页 面 。 在 这 种 打开 方式 下 可 以 单 击 新 页 面 左上 角 的 返回 按钮 或 使 用 wx.navigateBackO 接 
口 返回 到 原 页 面 。 其 OBJECT 参数 说 明 如 表 11-17 所 示 。 


表 11-17 wx.navigateTo(OBJECT) 的 参数 
参数 说 明 


再 要 跳 转 的 应 用 内 非 tabBar 的 页 面 的 路 径 ， 路 径 后 可 以 市 参数 。 
url String 古 参数 与 路 径 之 间 使 用 ?分 隔 , 参数 键 与 参数 值 用 = 相连 , 多 个 参数 用 


有 分 隔 ， 例 如 : 'path?key=value&key2=value2&...keyN=valueN' 
success() 接口 调用 成 功 的 回调 函数 
failO 接口 调用 失败 的 回调 函数 
complete() 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 会 执行 ) 


wxX.navigateTo(OBJECT) 示 例 代 码 如 下 : 


1 。 wx.navigateTo (tl 
之 - url: "test2?231d=—123" 
ET 


上 述 代码 表示 跳 转 到 test 页 面 ， 并 且 携 市 参数 1d=123。 
在 跳 转 到 的 test 页 面 可 以 通过 onLoad0O 函 数 获得 参数 值 ， 代 码 如 下 : 


- Page (il 
onLoad: function (option}! 

console.1og (option .1id) // 打 印 输 出 123 
} 


On 


1) 


注意 : 小 程序 规定 页 面 路 径 最 多 只 能 打开 10 层 。 
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11.4.2 ”返回 指定 页 面 


小 程序 使 用 wx.navigateBack(OBJECT) 关 闭 当 前 页 面 ， 返 回 上 一 页 面 或 多 级 页 面 。 
其 OBJECT 参数 说 明 如 表 11-18 所 示 。 
表 11-18 wx.navigateBack(OBJECT) 的 参数 
参数 说 明 
da | Number | ”1 | 返回 的 页 而 数 ， 如 果 delta 大 于 现 有 页 而 数 ， 则 返回 到 首页 
为 了 更 好 地 理解 该 接口 ， 假 设 有 A、B、C 三 个 页 面 ， 其 中 A 页 面 是 首页 。 
当前 是 A 页 面 ， 使 用 wx.navigateTo0 打 开 B 页 和 面 的 示例 代码 如 下 : 
. WX.nNavigateTol(t 


Wu 1 
a 


上 


当前 为 B 页 面 ， 再 使 用 wx.navigateIo0 打 开 C 页 面 的 示例 代码 如 下 : 


1. wx.navigateTo (tl 
pe | 


= 


当前 是 C 页 面 ， 使 用 wxnavigateBackO 返 回 A 页 面 的 示例 代码 如 下 : 


1 。 wx.navigateBackll 
2. delta: 2 // 如 果 是 1 则 返回 B 页 面 
es 


注意 : 如 果 用 户 不 清楚 页 面 层 数 ， 可 通过 getCurrentPagesO 获 取 当 前 的 页 面 栈 。 


11.4.3 ”当前 页 面 重 定 回 


小 程序 使 用 wx-redirectIo(OBJECT) 关 闭 当 前 页 面 内 容 ， 重 定 回 到 应 用 内 的 菏 个 页 面 。 
其 OBJECT 参数 说 明 如 表 11-19 所 示 。 


表 11-19 wx.redirectTo(OBJECT) 的 参数 
参数 说 __ 明 


需要 跳 转 的 应 用 内 非 tabBar 的 员 面 的 路 径 ， 路 径 后 可 以 市 参数 。 
url String 是 参数 与 路 径 之 间 使 用 ?分 隔 ， 参 数 键 与 参数 值 用 = 相连 ， 不 同 参数 


用 有 分 隔 ， 例 如 : 'path?key=value&key2=value2' 
success( 接口 调用 成 功 的 回调 函数 
failO 否 接口 调用 失败 的 回调 函数 
completeO 接口 调用 结束 的 回调 函数 《调用 成 功 与 否 都 执行 ) 


前 


wxXIedirectIo(OBJECT) 示 例 代 码 如 下 : 
1 。 wxX.redirectTor(t 


Url: "test21d=1" 
3= 十} 


上 述 代码 与 wx.navigateTo(OBJECT) 的 用 法 类 似 ， 只 不 过 此 时 无 法 返回 打开 前 的 原 页 面 。 
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11.4.4 重 司 页 面 


小 程序 使 用 wx-reLaunch(OBJECT) 关 闭 所 有 页 面 ， 重 新 打开 到 应 用 内 的 东 个 页 面 。 议 接 
口 从 基础 库 1.1.0 开始 文 持 ， 低 版 本 需 做 兼容 处 理 。 
其 OBJECT 参数 说 明 如 表 11-20 所 示 。 


表 11-20 wx.reLaunch(OBJECT) 的 参数 
参数 说 明 
裔 要 跳 转 的 应 用 内 页 面 路 笃 ， 路 人 径 后 可 以 禹 参数。 参数 与 路 征 之 
间 使 用 ?分 陋 ， 参 数 键 与 参数 信用 = 相连 ， 不 同 参数 用 区 分隔， 例 
如 path?key=value&key2=value2'， 如 果 跳 转 的 页 面 路 径 是 tabBar 
页 面 则 不 能 市 参数 
success() 接口 调用 成 功 的 回调 函数 
fail() 接口 调用 失败 的 回调 函数 


0 接口 调用 结束 的 回调 函数 《调用 成 功 与 否 都 执行 ) 


并 


url 


I 


I 


只 


wx.reLaunch(OBJECT) 示 例 代 人 码 如 下 : 
1 。 WwWX -TeLaunch (1{ 


ea Url: "test21d=1" 
3 


11.4.5 切换 tabBar 页 面 
小 程序 使 用 wx.switchTab(OBJECT) 跳 转 到 指定 的 tabBar 负面， 并 关闭 其 他 页 面 。 
其 OBJECT 参数 说 明 如 表 11-21 所 示 。 


表 11-21 wx.switchTab(OBJECT) 的 参数 


参数 说 明 


人 | 需要 跳 转 的 tabBar 页 面 的 路 径 《 需 在 appjson 的 tabBar 字段 定义 


并 


url 


的 页 面 ) ， 路 径 后 不 能 市 参数 
success() 接口 调用 成 功 的 回调 函数 
a 卫 口 调用 失 几 的 回调 函 阁 


completeO) 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


| 


I 


I 


wxX.SwWitchTab(OBJECT) 示 例 代 人 码 如 下 : 


1 。 wiX.SwitchTabltlt 
2 url: "/index" 


3. |}) 


需要 注意 的 是 ， 使 用 wx.switchTab(OBJECT) 必 须 确保 切换 的 页 面 是 在 app.json 的 tabBar 
属性 中 声明 过 的 页 面 。 

【 例 11-9】 界面 API 之 页 面 导航 的 综合 应 用 

本 示例 将 用 于 展示 本 广 所 学 的 页 和 面 导 航 的 $5 种 设 普 方 式 ,包括 如 下 内 容 。 

e wx.navigatelo(): 味 6 转 新 页 面 。 | 

。wx.navigateBack(): 返回 前 一 页 面 。 视频 讲解 

e wx.redirectTo(): 当前 页 面 重 定 回 。 

e wx.reLaunch(): 重 司 页 面 。 
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e wx.switchTab(): 切换 到 tabBar 页 面 。 
WXML (pages/demo04mmavigate/mmavigate.wxml) 文件 代码 如 下 : 


Tiewmelass=eitle' 4 页 向 导航 二 /iew> 

2. <View Class='demo-box'> 

人 <view Class="'title'>(l1)wx.navigqateTo</view> 

4. <buttontype=" primary" SizZe~="mini" pindtap"navigateTo"> 跳 转 新 页 面 </button> 

5. </view> 

6. <view Class='demo—box'> 

Fe <view Class="'title'>(2)wx.navigateBack</view> 

8. <button type="primary” Size="mini" bindtap= "navigateBack"> 述 回首 页 </button> 

9. </view> 

10.<view Cclass="'demo—box'> 

11,. <view Class="title'>(3)wx.redirectTo</view> 

1l2. <button type="pPIrIimary” SiZe="mini' bindtap="redirectTo"> 当 前 页 面 重 定 问 
</button> 

13.</view> 

14.<view Cclass="'demo—box'> 

15. <view Class="title'>(4}wx.reLaunch</view> 

16- <button type="PpPIimary” SiZe= "mini' bindtap-"reLaunch"> 旭 局 贝 面 </button> 

17.</view> 

18.<view Class="'demo—box'> 

19. <view Class="'title'™>(5}wx.switchTab</view> 

20. <button type=" "primary™” Size="mini" bindtap="switchTab "> 切换 到 tabBar 例题 页 
面 </button> 

21.</view> 


JS (pages/demo04mmavigatemavigate.js) 文件 代码 如 下 : 


1. Page l(t{ 

We navigateTo: function()} { 
wxXx.navigateTol(t{ 

4. url: '/pages/demo04/new/new', 
三 }) 

0. }, 

Fe navigateBack:function() 1 

8. wx.navigateBack({}) 

a 上 7 

10. redirectTo: function() f 

11- WX.redlirectTor(l{ 

| url: "'/pages/demo04/new/new', 
13- }) 

14- 1}, 

15. reLaunch:function(}t 

16- WX. reLaunchl(t 

LT url: '/pages/demo04/new/new', 
18. }) 

13. 1s 

20. switchTab: functiont{(}) f{ 

We We WX.SwitchTablt(t 

2 url: '/pages/demo03/tabBar/tabBar', 
23. }) 

We 

2.1}) 


除了 示例 页 面 以 外 ， 本 例 还 用 到 一 个 新 页 面 new.wxml 汝 示 打 开 效 果 。 
新 页 面 的 WXML (pages/demo04/new/new.wxml) 文件 代 公 如 下 : 


<view Class='title'> 这 是 一 个 新 页 面 </view> 


运行 效 末 如 图 11-10 所 示 。 
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(b) 跳 转 新 页 面 
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(1) 右 上 角 文 本 设置 


(2) 右 上 角 红 后 设置 


(3)tabBar 样 式 设 置 


(4)tabBar 的 显示 与 隐藏 


首页 


(d) 切换 到 tabBar 例题 页 面 


图 11-10 页面 导航 的 绽 合 应 用 
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【代码 说 明 】 

本 示例 在 navigate.wxml 中 包含 了 5 个 <button> 按 钮 分 别 用 于 跳 转 新 页 面 `. 返 回 前 一 页 面 、 
当前 页 面 重 定 问 、 重 局 页 面 、 切 换 到 tabBar 例题 页 面 , 对 应 的 目 定 义 函 数 分 别 是 navigateTo()、 
navigateBack()、redirectTo()、reLaunch() 和 switchTab()。 在 navigate.js 中 定义 navigateTo()、 
redirectIo0 和 reLaunchO 打 开 new.wxml 新 页 面 ;定义 navigateBackO 返 回 index.wxml 首页 ; 
定义 switchTab0 切 换 到 tabBar.wxml 例题 页 面 。 

在 图 11-10 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 navigateTo0 和 redirectTo0 跳 转 新 页 
而 的 效果 ， 区 列 在 于 前 痢 还 能 返回 到 navigate 页 面 ， 后 痢 只 能 返回 到 Index 让 贝 ; 图 (c) 是 
和 军 局 页 面 的 效果 ， 由 该 图 可 见 此 时 其 他 所 有 页 面部 被 关闭 ， 无 法 回 到 上 一 页 ; 图 (d) 为 切换 
到 tabBar 例题 页 面 效果 ， 此 时 其 他 非 tab 页 面 均 被 关闭 。 


小 程序 组 件 通过 animation 属性 来 显示 动画 ， 其 动画 效果 的 实现 需要 3 个 步骤 ， 即 创建 
动画 实例 ; 通过 调用 实例 的 方法 来 描述 动画 ; 通过 动画 实例 的 export0 方 法 导出 动画 数据 传递 
给 组 件 的 animation 属性 。 


11.5.1 动画 实例 


小 程序 使 用 Wx.createAnimation(OBJECT) 可 以 创建 一 个 动画 实例 animation。 
其 OBJECT 参数 说 明 如 表 11-22 所 示 。 


表 11-22 wx.createAnimation(OQBJECT) 的 参数 


参数 光阴 
i 动画 持 区 时间， 单位 为 
aaa er | 下 | 0 | 动 延 妈 时 间 ,单位 为 ms 
a ET 


ID 


ID 


ID 


ID 


timingFunction 的 有 效 值 如 下 。 
。 jlinear: 动画 从 头 到 尾 的 速度 是 相同 的 。 
e ease: 动 男 以 低速 开始 ， 然 后 加 快 ， 在 结束 前 变 慢 。 


e ease-in: 动画 以 低速 开始 。 

。 ease-in-out: 动画 以 低速 开始 和 结束 。 

。 ease-out: 动画 以 低速 结束 。 

。 step-start: 动画 的 第 1 由 就 跳 至 结束 状态 直到 结束 。 

step-end: 动画 一 直 体 持 开 始 状态 ， 和 在 最 后 一 帆 跳 到 结束 状态 。 
wx.createAnimation(OBJECT) 示 例 代 人 如 下 : 


- Var animation~wx .createAnimationt(l 
duration: S50O00, 
timingFEFunction: "ease—in" 


HLu [aa 捕 


- }) 


上 述 代 但 表示 动 男 持 续 时 间 为 3 秒 ， 且 以 低速 开始 。 


11.5.2 ”动画 的 描述 
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动画 实例 可 以 调用 animation 对 象 的 相关 方法 来 拉 述 动画 ， 在 调用 结束 后 会 返回 目 身 。 
animation 对 象 的 方法 可 以 分 为 6 类 ,分 别 用 于 控制 组 件 的 样式 、 旋 转 、 缩 放 、 偏 移 、 倾 


和 斜 和 矩阵 变形 。 
控制 组 件 样式 的 方法 如 表 11-23 所 示 。 
表 11-23 animation 对 象 方法 〈 样 式 ) 


万 法 参 数 说 明 
opacityO 透明 度 ， 参 数 范 围 为 0 一 1 
backeroundColor() 颜色 人 
a a 长 度 信 ， 如 末 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 目 定 义 单 
位 的 长 度 值 
有 长 度 信 ， 如 采 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 目 定义 单 
top0) neil 长 度 值 ， 如 有 果 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 目 定 义 单 
z 位 的 长 度 值 
je ee 长 度 值 ， 如 采 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 目 定 义 单 
Pee 位 的 长 度 值 
bottomg length 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 自 定义 音 
- 位 的 长 度 值 
. 长 度 值 ， 如 果 传 人 Number 则 默认 使 用 px， 可 传 入 其 他 上 日 定义 日 
0 位 的 长 度 值 
控制 组 件 旋 转 的 方法 如 表 11-24 所 示 。 
表 11-24 animation 对 象 方法 (旋转 ) 
万 法 参 数 说 。 明 
rotate( ) deg 的 范围 为 -180 一 180， 从 原点 顺 时 针 旋 转 一 个 deg 角度 
rotateX() deg 的 范围 为 -180 一 180， 在 义 轴 旋转 一 个 deg 角度 
rotateY0 deg 的 范围 为 -180 二 180， 在 立轴 旋转 一 个 deg 角度 
TotateZ 人 0 deg 的 范围 为 -180 一 180， 在 ZZ 轴 旋 转 一 个 deg 角度 
rotate3d() 加 transform-function rotate3dO 


控制 组 件 缩放 的 方法 如 表 11-25 所 示 。 
表 11-25 ”animation 对 象 方法 (缩放 ) 


方 法 人 参 数 说 有明 
2] 当 一 个 参数 时 ， 表 示 在 和 轴 、 立 轴 同 时 缩放 sx 倍数 ， 当 两 个 参数 时 ， 表示 
9 SY] | 在 X 轴 缩放 sx 倍数 、 在 立轴 缩放 sy 倍数 
scaleX0O SX 在 义 轴 绚 放 sx 倍数 
scaleY( 在 立轴 脓 放 sy 倍数 
scaleZO 在 Z 轴 缩 放 sy 倍数 


scale3dO0 SX.SY.SZ 在 往 轴 及 放 sx 倍数、 在 立轴 缩放 sy 倍数 、 在 乙 轴 缩放 sz 倍数 


控制 组 件 偏 移 的 方法 如 表 11-26 所 示 。 
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表 11-26 animation 对 象 方法 〈 含 移 ) 


方 法 | 参数 说 了 明 


当 一 个 参数 时 ， 表 示 在 和 轴 偏 移 g;， 当 两 个 参数 时 ， 表 示 在 和 轴 偏 移 
i 区 、 在 Y 轴 偏 移 了 

translatex() 在 X 轴 偏 移 ft 

translateYO 在 站 轴 仿 移 ft 

translateZ() 在 乙 轴 俩 移 奴 

translate3d() 在 X 轴 俩 移 t、 在 立轴 仿 移 ty、 在 Z 轴 俩 移 世 


注意 : 偏 移 单位 均 为 px。 
控制 组 件 倾斜 的 方法 如 表 11-27 所 示 。 
表 11-27 animation 对 象 方法 〈 倾 斜 ) 


万 法 参 数 说 明 

skew0 ee 参数 沌 围 为 -180 一 180。 当 一 个 参数 时 ，Y 轴 坐 标 不 变 ，X 轴 华 标 沿 顺 时 
针 倾 斜 ax 度 ， 当 两 个 参数 时 ， 分 别 在 和 轴 倾斜 玖 度 、 在 立轴 倾 糙 ay 度 

skewX() 参数 范围 为 -180 一 180。Y 轴 坐 标 不 变 ，X 轴 坐 标 沿 顺 时 针 倾 笑 ax 虔 

skewY() 参数 范围 为 -180 一 180。 买 轴 坐 标 不 变 ，Y 轴 坐 标 沿 顺 时 针 倾 笑 ay 虔 


控制 组 件 矩 阵 变 形 的 方法 如 表 11-28 所 示 。 


表 11-28 animation 对 象 方法 〈 和 矩阵 变形 ) 
方 ” 法 — 说 明 
matrix() 间 CSStransform-function matrix() 


matrix3d() 同 CSStransform-function matrix3d() 


animation 对 象 允 许 用 户 将 任意 多 个 动 男方 法 退 加 在 同一 行 代码 中 , 表示 同时 开始 这 一 组 
动画 内 容 ， 在 调用 动画 操作 方法 后 还 需要 调用 step0O 来 表示 一 组 动画 完成 。 
例如 : 


animation.scale(2) .rotate (90) .backgroundColor(‘"purple')}) -Step () 


上 述 代码 表示 将 组 件 在 指定 的 时 间 内 放大 到 原来 的 两 倍 ， 并 且 顺 时 针 旋转 90”， 同时 将 
背景 颜色 更 新 为 紫色 。 

若是 希望 多 个 动画 按 顺序 依次 执行 ， 每 组 动画 之 间 都 需要 使 用 stepO 隔 开 。 

例如 上 述 代码 可 修改 为 : 


animation.scale(2) .step() .rotate (90} .step(} .backgroundColor("pPpurple"}) .stepl()} 


这 段 代 码 表示 将 组 件 按照 顺序 依次 做 到 放大 到 原来 的 两 倍 、 顺 时 针 旋 转 90”、 背 景 闫 色 
更 新 为 紫色 。 


11.5.3 动画 的 导 巾 
在 声明 完 animation 对 象 并 描述 了 动画 方法 后 ， 还 需要 使 用 exportO 将 该 对 象 导出 到 组 件 
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的 animation 属性 中 ， 这 样 才 可 使 得 组 件 具 有 动画 效 末 。 
以 <view> 组 件 为 例 ，WXML 代码 如 下 : 


<Vview animation="{{animationDatal}l} ></ View> 


JS 代 公 如 下 : 


/1/1 .创建 animation 对 象 

-Var animation~wx .createAnimation() 
//2 .描述 动画 

- animation.scale (2) .stepl() 

//3. 叶 出 全 组 件 的 动画 属性 


. this.setData({animationData:animation.export()}) 


gt 性 


小 程序 也 允许 多 识 调 用 exgport0 方 法 导出 不 同 的 动 男 摘 述 方法 。 
例如 刚才 的 JS 代码 可 以 更 新 为 如 下 内 容 : 


/ /1 .创建 animation 对 象 

. Var animation~wx .createAnimation() 

/ /2 . 摘 述 第 一 个 动力 

- animation.scale (2) -Step 1() 

//3. 叶 出 至 组 件 的 动画 属性 

- this.setData({animationData:animation.export () })} 
//4. 摘 述 第 二 个 动力 

- animation.rotate (180) -SteP () 

//5. 导 出 至 组 件 的 动画 属性 


0.this.setData({animationData:animation.export()}) 


ni 


-| 
十 而 


此 时 一 组 动画 完成 后 才 会 进入 下 一 组 动画 ， 每 次 调用 exportO 后 会 复 兰 之 前 的 动画 操作 。 
【 例 11-10】 界面 API 之 动画 的 综合 应 用 

本 示例 将 用 于 展示 本 广 所 竺 组 件 动 画 的 几 种 变形 方式 ， 包 括 如 下 内 容 : 
。 旋转、 缩放 、 偏 移 、 倾 斜 ; 

。 同 时 播放 全 部 动画 ; aT 
. 依次 播放 每 -个 动画 ; 视频 讲解 
。 还 原 组 件 的 初始 状态 。 

WXMI (pages/demo05/animation/animation.Wwxml) 文件 代码 如 下 : 


1. <view Class="title'>5. 动 加 </vwiew> 

2. <View Class='"'demo—box'> 

3 <view class='title'>animation 的 用 法 </view> 

4. <view class='animation-—-view' animation="{{animation}}'> 这 是 动画 组 件 </view> 
5. <button Eype="primary” size='mini bindtap="rotate"> 腊 转 </button> 

6. <button type=" "primary” SizZe= "mini’ bindtap=”" scaler> 纵 放 < /DLLEon> 

7 <Button type="primarv" STZe= mini Dinatap=transtater> 侦 向 < /DutEon> 
3 <button type=" "primary™” SizZe="mini’ bindtap="skew"> 倾 斜 < /button> 

9. <button bindtap="sync"> 同 时 动画 </button> 

10. <button bindtap= "queue"> 依 坎 动 画 </button> 

jh <button bindtap-"reset"> 逮 原 </button> 

12. </view> 


WXSS (pages/demo05/animation/animation.wxss) 区 件 代 码 如 下 : 


1. .animation—viewt1 
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a width: 220rpx; 

0 height: 220rpx; 

4. background—color: lightgreen; 
< margin: 20rpx autos; 

6. line—height: 220rpx; 

| 

83. buttont 

3 margin: lO0rpx; 

iad 


JS (pages/demo05/animation/animation.js) 文件 代码 如 下 : 


1. PEage(t 

2. // 旋 转 

rotate: function({() { 

号 this.animation.rotate (45) .step() 

上 “本 this.setData({ animation: this.animation.export() }) 
5 

7. /7 缩放 

8 。 scale: function() { 

9. this.animation.scale (0.5) .step{) 

10- this.setDatat({ animation: this.animation.export() }) 
El 


12. // 偏 移 


13. translate: function() { 


14. this.animation.translate (100, 50) .step() 

de this.setData({ animation: this.animation.export() }) 
1l6. 上 

17. // 倾 斜 

18. skew: function() I 

hs this.animation.skewX (45) -Step 1() 

zz. this.setData({ animation: this.animation.export() }) 
1. 1}, 

22 . // 同 时 动画 

23. SVvnc: functionl(} 1{ 

Ee this.animation.rotate(45) .scale (0.5) .translate (100, 50) .skewX (45) .step() 
We this.setData({ animation: this.animation.export() }) 
bo. }, 

27. // 依 次 动画 

28. queue: function()} { 

Wn I this.animation.rotate(45)} .step() .scale(0.5) .Step () 
30. .translate (100, 50) -Step () .skewX (45) -Step () 
1 this.setDatat{ animation: this.animation.export() }) 
32- 1}, 

ei 

34. reset: functiont()} 1 

二 this.animation.rotate(0) .Scale(1) .translate (0, 0) .skewX (0}) .step() 
36. this.setDatat({ animation: this.animation.export() }) 
31. 上 ， 

38. onReady: function() 1{ 

I this.animation~wx.createAnimationt{({ duration: 3000 1}) 
40.  } 

41.1) 


YY = hs 


运行 效果 如 图 11-11 所 示 。 
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Cc) 缩放 动画 结束 后 


击 间 重量 二 人 EL hat 至 15-31 


便 同 DEMO 


第 11 章 界面 API 
5. 动画 | 


anmimation 的 用 法 


rs 


岛 油 信 小 程序 开发 于 基础 必 门 
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(b) 旋转 动画 结束 后 
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(f》 同时 动画 结束 后 
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【代码 说 明 】 

本 示例 在 animation wxml 中 包含 了 一 个 带 有 animation 属性 的 <view> 组 件 用 于 动画 效果 ， 
并 在 animation.wxss 中 设置 该 组 件 的 宽 、 高 均 为 220rpx， 浅 绿色 背景 ;在 <view> 组 件 下 方 有 
4 个 <button> 迷 你 按钮 分 询 用 于 为 组 件 实现 旋转 、 缩 放 、 俩 移 和 倾斜 的 动画 效果 ， 对 应 的 目 定 
义 图 数 是 rotateO0、scaleO0、translate0 和 skewO; 另 有 3 个 <button> 普 退 按 钮 分 别 用 于 让 组 件 
同时 动画 、 依 识 动 男 和 还 己 初始 状态 ， 对 应 的 目 定 义 图 数 是 sync()、queue() 和 resetD。 在 
animation.js 的 onReadyO 函 数 中 议 症 每 次 动 男 的 持续 时 间 为 3 秒 。 

在 图 11-11 中 ,图 (a) 为 页 面 初 始 效果 ; 图 (b) 一 图 (e) 分 别 为 组 件 的 4 种 动画 效果 ; 
图 (f) 为 这 4 种 动画 效果 同时 完成 后 的 效果 ， 如 果 选 择 依次 动画 ， 最 终 一 帆 的 效果 相同 。 截 
图 只 能 看 到 动画 完成 后 的 最 后 一 帜 ， 开 发 者 可 以 运行 代码 全 看 完整 动画 过 程 。 


小 程序 使 用 wx.pageScrollTo(OBJECT) 将 页 面 深 动 到 目标 位 置 ， 该 接口 从 基础 库 1.4.0 开 
始 文 持 ， 低 版 本 圾 做 莱 容 处 理 。 其 OBJECT 参数 说 明 如 表 11-29 所 示 。 
表 11-29 wx.pageScrollTo(OBJECT) 的 参数 


参 数 名 说 明 
scrollTop 深 动 到 页 面 的 目标 位 置 ( 早 位 为 px) 
duration 否 深 动 动画 的 时 长 ， 默 认为 300ms， 单 位 为 ms 


wx.pageScrollTo(OBJECT) 示 例 代 码 如 下 : 


1 。 wxX.pageScrollTol(l! 
2 SerolTlTop: .0 
3 duration: 3000 
和 -上 


上 述 代 码 表示 将 页 面 深 动 回 最 顶端， 动画 效果 为 3 秒 钟 。 
【 例 11-11】 界面 API 之 页 面 位置 的 简单 应 用 
WXML (pages/demo06/scroll/scrollwxml) 文件 代码 如 下 : 


| 
<V1IewWw class='title'>wx.pageScrollTo (OBJECT) 的 用 法 </view> 
<View class='test'> 这 是 一 个 高 度 超 过 手机 屏幕 的 组 件 </view> 


<button type="primary™ pbindtap"backToTop"> 回 到 顶部 </button> 
- </view> 


<view class='title'>6. 册 面 位 置 </view> 
<VIiIew Class="'demo—box'> 


TY 


WXSS (pages/demo06/scroll/scroll.wxss〉 区 件 代码 如 下 : 


- -testt 
height: 1l1200rpx; 
background—color: lightyellow; 
} 


户 Ia 户 


JS (pages/demo06/scroll/scrolljs) 文件 代码 如 下 : 


1. BEage(t 
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2. /7/ 回 到 顶部 

加 backToTop: functiont()l! 
4. wx.PpageSscrollTo(t{ 
EE scCrollTop: 0, 

避 - duration:2000 

J }) 

有 8 - 
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(a) 页 面 拖 到 底部 效果 (b) 单 击 按钮 目 动 返回 顶部 


图 11-12 页面 位 置 的 简单 应 用 


【代码 说 明 】 

本 示例 在 scroll.wxml 中 包含 了 一 个 高 1200rpx、 浅 黄色 背景 的 <view> 组 件 ， 用 于 让 页 面 
可 以 滚动 到 底部 ; 在 <view> 组 件 的 下 方 是 <button> 按 钮 ， 用 于 单 击 回 到 页 面 项 部 ， 对 应 的 目 
定义 国 数 是 backIoTop0。 在 scrolljs 中 定义 backToTop0 方 法 实现 回 到 页 面 项 部 并 市 有 持续 两 
秒 的 回 上 滚动 动画 效果 。 

在 图 11-12 中 ,图 (a) 为 页 面 拖 到 的 部 的 效果 ， 此 时 只 能 看 到 下 半 部 分 <view> 组 件 和 其 
压 部 按钮 ; 图 (b) 为 单 击 按钮 目 动 返 回 项 部 的 最 终 效 果 ， 此 时 可 以 看 到 页 面 顶端 的 标题 和 上 
半 部 分 <view> 组 件 。 


11.7.1 准备 工作 


画布 坐标 系 
在 正式 学 习 绘 图 的 相关 代 人 码 之 前 需要 了 解 画 布 坐标 系 的 原理 。 男 布 坐标 系 中 原点 的 位 置 


微 信 小 程序 开发 零 基础 入 门 


在 画布 矩形 框 的 左上 角 ， 即 (0,0) 坐 标的 位 置 。 该 坐标 系 与 数学 坐标 系 在 水 平方 向 上 一 致 ， 季 
直方 向 为 镜像 对 称 。 也 就 是 说 ， 男 布 坐标 系 的 水 平方 向 为 入 轴 ， 其 正方 癌 为 向 右 延 伸 ; 垂直 
方 问 为 了 了 轴 ， 其 正方 癌 为 同 下 延伸 。 
具体 的 坐标 系 如 图 11-13 所 示 。 
创建 空白 画布 
小 程序 使 用 <canvas> 组 件 呈 现 画 布 区 域 ， 因 此 痛 先 弟 要 在 WXML 页 面 上 使 用 该 组 件 创 
建 男 布 ， 并 必须 市 有 目 定 义 的 canvas-id 名 称 。 例 如 : 
<Camnvas canvas—id='myCanvas'" style='bporder:1rPX solid" ></canvas> 
上 述 代码 表示 声明 了 一 个 带 有 lrpx 宽 、 黑色 实 线 边 框 的 画布 , 其 canvas-id 为 myCanvas。 
画布 的 默认 尺寸 是 宽度 为 300px、 蜗 度 为 223Spx， 用 户 可 根据 实际 需要 重新 定义 。 
例如 规定 画布 的 宽 、 高 均 为 600rpx， 居 中 显示 ， 其 WXSS 代码 如 下 : 
- Canvast 
width: 600rpx; 
height: 600rpx; 


margin: 0 auto; 


} 


全 


画布 效果 如 图 11-14 所 示 。 


图 11-13 ”画布 坐标 系 11-14 ”创建 空白 画布 


开发 者 也 可 以 自行 在 WXSS 文件 中 重新 规定 画布 的 尺寸 、 背 景 颜色 等 样式 内 容 。 
创建 画布 上 下 文 对 象 
小 程序 使 用 Wx.createCanvasContext(canvasId) 创 建 画 布 上 下 文 对 象 , 然 后 使 用 该 对 象 的 方 
法 进行 画笔 设 症 和 绘图 工作 。 
用 尸 可 以 在 JS 页 面 的 onLoad0O 郴 数 中 使 用 该 接口 创建 国 布 上 下 文 对 象 ， 示 例 代 人 码 如 下 : 
1. Page(L 
onLoad: function (options) 1{ 
2 const ctx~wx.createCanvasContext ('myCanvas') / /创建 画布 上 下 文 
4 
与 


- |} 
- }) 


上 述 代码 中 的 ctx 为 目 定义 名 称 ， 开 发 者 可 以 目 行 更 改 。 为 了 方便 后 续 的 讲解 ， 本 章 全 
部 示例 均 使 用 ctx 作为 画布 上 下 文 对 象 的 名 称 ， 不 再 重复 介绍 。 
此 时 准备 工作 全 部 完成 ， 在 学 习 男 布 对 象 的 相关 方法 后 束 可 以 进行 绘图 了 。 
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11.7.2 ”绘制 个 形 


创建 和 矩 形 
小 程序 使 用 画布 对 象 的 rect0 方 法 创建 矩形 ， 然 后 使 用 fl10 或 stroke0 方 法 在 画布 上 填充 


实心 矩形 或 描 边 空心 矩形 。 其 语法 格式 如 下 : 


ctx.rect (x, vy, width, height) 


其 参数 说 明 如 下 。 

e X: Number 类 型 ， 和 矩形 左上 角 点 的 x 坐标 。 
e。 y: Number 类 型 ， 和 矩形 左上 角 点 的 y 坐标 。 
。 width: Number 类 型 ， 算 形 的 宽度 。 

。 height: Number 类 型 ， 和 矩形 的 高 度 。 


例如 : 
1. Page l(t{ 
a onLoad: function(options) (| 
:人 Const ctx~wx.createCanvasContext('myCanvas') / /创建 画布 上 下 文 
I Ct. rect {50 SO 200, 200) 

/ /描述 一 个 左上 角 坐 标 为 (50, 50) 、 宽 和 高 均 为 200 像素 的 矩形 

与 二 Erinloteyvielr oarsno / /描述 填充 闫 色 为 橙色 
6. etx E11 / /描述 填充 矩形 动作 
7 ctx.draw () / /在 台布 上 执行 全 部 描述 
2 } 
| 


运行 效 末 如 图 11-15 所 示 。 


图 11-15 ”在 画布 上 创建 实心 起 形 


注意 : 画笔 默认 是 黑色 效果 (无 论 是 填充 还 是 描 边 )。setFillStyleO 用 于 设置 画笔 填充 


顾 色 ， 这 里 仅 为 临时 使 用 ， 对 于 更 多 介绍 可 查看 本 章 第 11.7.6 节 “颜色 与 样式 ”。 


填充 和 矩形 
小 程序 使 用 画布 对 象 的 名 Rect0 方 法 直接 在 画布 上 填充 实心 矩形 ， 其 语法 格式 如 下 : 


ctx.fillRect (x, YYr width, height)} 
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其 参数 与 创建 矩形 的 rect0 方 法 的 参数 完全 相同 。 
图 描 边 和 矩形 
小 程序 使 用 国 布 对 象 的 strokeRectO 方 法 直接 在 画布 上 拉 边 空心 矩形 ， 其 语法 格式 如 下 : 


ctx.strokeRect (x vy,: width, height) 


gine 形 的 rect0 方 法 的 参数 完全 相同 。 
peed tn clearRect() 方 法 清空 矩形 区 域 ， 其 语法 格式 如 下 : 


Ct.ClearRect{lx, vr width, height) 


其 参数 与 创建 矩形 的 rectO 方 法 四 同 。 
【 例 11-12】 界面 API 之 绘制 矩形 的 综合 应 
本 示例 将 展示 定形 的 几 种 绘制 方式 ， ures 
。 填 元 实心 站 形 ; 
倪 频 讲解 。 描 边 空心 矩形 ; 

。 清空 画布 大 小 的 兴 形 区 域 。 

WXMIL (pages/demo07/rect/rect.wxml) 文件 代码 如 下 : 


. <view class='title'>7- 绽 图 </view> 

-<VlIeWwW Class="'demo—box'> 

<View class='title'> 绘 制 第 形 </view> 

<Canvas canvas—-id='myCanvas'" style='border:1lrpx solid'></canvas> 
<button type='primary' size='mini' bindtap-'fillRect'> 填 元 窜 形 </button> 
<button type='primary' size—'mini" bindtap=' strokeRect7'> 摘 边 盾 形 </button> 
<button 七 YPe= PIImaryYyY” SlizZe="'mini" pnadtap= "clearRect > 清空 田 布 </button> 
- </view> 


一 


WXSS (pages/demo07/rect/rect.wxss) 文件 代码 如 下 : 


1 。 buttont 
margin: lO0rpx; 


[5 


0 


JS (pages/demo07/rect/rect.js ) 文件 代 人 码 如 下 : 


1. Page l(t{ 

2 fillRect:function(})t 

本 二 Le EEx tl EEx 

4. ctx.rect (S50, S50, 200, 200) 
ee ctx.setF1illiStylel'" orange'")} 


6. Ex ELLLU) 

We ctx.drawl) 

Be }, 

= strokeRect: function()} 1 

10. let ctzx=this.ctx; 

| ctx. Tect (100, 100, 100, 100) 
下 过: ctx.setstrokestyle('purple'") 
a ctx.strokel) 

14. ctx.drawt{) 

LB 


16- clearRect: function() { 
1 1/ et Ctx=sihisse citixs 
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18. ctx.clearRect (O00, 0O, 300, 300)} 


1 2 ctx.drawt{) 

20- 上 

21. onLoad: function(options)} { 

2 this.ctx~wx.createCanvasContext ('myCanvas') / /创建 画布 上 下 文 
23. } 

4.1) 


运行 效果 如 图 11-16 所 示 。 


第 11 章 界面 API 第 11 章 界面 API 第 11 章 界面 API 
7. 绘图 7. 绘图 7. 绘图 


绘制 矩形 绘制 矩形 绘制 矩形 


已 微 信 小 程序 开发 零 基 础 入 门 已 微 信 小 程序 开发 零 基础 入 门 名 微 信 小 程序 开发 零 基 础 入 门 


(a) 填充 矩形 (b) 描 边 矩 形 (c) 清空 画布 
11-16 ”绘制 矩形 的 综合 应 用 


【代码 说 明了】 

本 示例 在 rect.wxml 中 包含 了 3 个 <button> 按 钮 分 别 用 于 显示 填 元 矩形 、 手边 滤 形 和 清空 
男 布 效果 ， 对 应 时 目 定 义 函 数 分 别 是 fllRectO、strokeRectO 和 clearRect()。 在 rectjs 中 定义 
fillRectO 方 法 用 于 绘制 一 个 左上 和 角 坐 标 在 (50.30)、 宽 和 高 均 为 200 像素 的 权 色 实心 矩形 ; 
strokeRect0 方 法 用 于 绘制 一 个 左上 角 坐 标 在 (100.100)、 宽 和 高 均 为 100 像素 、 紫 色 边 框 的 空 
心算 形 ; clearRectO 方 法 用 于 清空 整个 画布 区 域 。 

在 图 11-16 中 ， 图 (a) 为 填 元 矩形 ， 此 时 是 实心 矩形 的 效果 ; 图 (b) 为 拍 边 矩形 ， 此 
时 是 空心 矩形 的 效果 ; 图 (c) 是 清空 画布 区 域 ， 此 时 男 布 内 容 将 被 完全 清除 。 


11.7.3 绘制 路 径 


路 径 〈Path) 和 古 绽 制 图 形 轮 万 时 男 笔 留 下 的 轨迹 ， 也 可 以 理解 为 画笔 男 出 的 像 条 点 组 成 
的 线条 。 多 个 点 形成 线段 或 曲线 ， 不 同 的 线段 或 曲线 相连 接 叉 形成 了 各 种 形状 效果 。 
绘制 路 径 主 要 有 以 下 4 种 方法 。 
。 beginPathO: 用 于 新 建 一 条 路 径 ， 也 征 图 形 绘制 的 起 点 。 每 次 调用 充 方 法 者 会 清空 之 
前 的 绘图 轨迹 记录 ， 重 新 开始 绘制 新 的 图 形 。 
e closePath0: 该 方法 用 于 闭合 路 径 。 当 执行 该 方法 时 会 从 男 笔 的 当前 坐标 位 置 绘制 一 
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条 线段 到 初始 坐标 位 置 来 财 合 图 形 。 此 方法 不 是 必需 的 ， 知 画笔 的 当前 坐标 位 置 束 是 
初始 坐标 位 置 ， 则 该 方法 可 以 和 省略 不 写 。 

e stroke0: 在 图 形 轮 亡 义 勒 完毕 后 需要 执行 该 方 法 才能 正式 将 路 径 演 染 到 男 布 上 。 

e fll0: 用 户 可 以 使 用 该 方法 为 图 形 填 充 菇 色 ， 生 成 实心 图 形 。 夺 并 未 执行 closePathO 
方法 来 财 合 图 形 ， 则 在 此 方法 被 调用 时 会 自动 生成 线段 连接 画笔 当前 坐标 位 置 和 初始 
坐标 位 置 ， 形 成 财 合 图 形 然 后 再 进行 填充 颜 色 。 

绘制 线段 

绘制 线段 主要 有 以 下 两 种 方法 。 

。moveTo(x,y): 将 当前 的 男 笔 直线 移动 到 指定 的 (xJ) 坐 标 上 ， 并 且 不 留 下 移动 痕迹 。 用 
该 方法 可 以 定义 线段 的 初始 位 置 。 

e。 lineTo(x,y): 将 当前 的 画笔 直线 移动 到 指定 的 Ce 切 坐 标 上 ， 并 且 画 出 移动 痕迹 。 用 该 方 
法 可 以 进行 线段 的 绘制 。 

最 后 同样 需要 使 用 stroke0 方 法 绘制 线段 , 在 使 用 该 方法 之 前 的 所 有 绘制 动作 均 为 路 径 绘 

制 ， 可 以 将 其 理解 为 透明 的 轨迹 ， 访 轨迹 不 会 显示 在 画布 上 。 

例如 : 

ctx-beginPath () // 开 始 摘 述 路 径 

ctx.moveTo (50, 50) // 将 画笔 放 到 (50, 50) 坐标 点 上 准备 绘制 路 径 

.1ineTo(100,100) // 国 一 条 线段 至 (100,100) 坐标 点 


ctx.stroke() // 设 置 摘 边 效果 
ctx.draw({() /7 绘制 到 画布 上 


WN 
nN 
lp 
D4 


注意 : 在 绘制 线段 时 beginPath0 方 法 也 可 以 省 略 不 写 ， 在 所 有 的 轨迹 完成 后 直接 使 用 
stroke( 方 法 可 以 实现 一 样 的 效果 . 


【 例 11-13】 界面 API 之 绘制 线段 的 简单 应 用 
WXML (pages/demo07/path/path.wxml) 文件 代码 如 下 : 


1 <view class="title’'>7. 当 图 </view> 

2,. <VIeEW Class=" demo—box'> 

区 <view class='title'> 绘 制 线 段 </view> 

<Canvas canvas—id="'myCanvas'" style='border:l1lrpx solid'></canvas> 
<button 七 YPe= PITImary” SlizZe= "mini" bindtap="strokePath'" > 摘 边 路 径 </putton> 
<button type="pPrimary Size="mini" bindtap="fillPath" > 盾 元 路 任 </button> 

. </view> 


44. 
3 
全 
| 


JS (pages/demo07path/path.js) 文件 代码 如 下 : 
1 。 buttont 


人 margin: lO0rpx; 
| 


JS (pages/demo07pathpath.js) 文件 代码 如 下 : 


1. Page (tl 

2. // 绘 制 基本 图 形 

攻 刘 drawSample: function() { 
孔 - let ctx=—this.ctx 

5. / /绘制 三 角形 

6. ctx.beglinPath () 


ee Ctx.moveTo(ltlo0, To) 

8. ctx.l1ineTo(225, 2220) 

2 ctEx olineTol/g™ 229) 

I ctx.closepPathl) 

li. 上 

12. /V/ 描 边 路 径 

13. strokePath:function()}t 
14. let ctzx=this .ctx 

13 this.drawSsample () 

16. tx setESErokestEv le red’l 
下 ctx.strokel) 

18- ctx.drawt) 

13. }, 

20. // 填 元 路 径 

21. fillPath: functiont(} 1{ 
har Jet ctx=this .ctx 

Pk this.drawSsample () 

Ea: 。 ctx.setFillStyle('blue") 
a ctx.fillt() 

26 ctx.drawt) 

2 上 

28 onLoad: function (options) 
/ /创建 画布 上 下 文 

30 。 

31. } 

32 .上 上) 


运行 效 末 如 图 11-17 所 示 。 


例 | 是 DEMO 


第 11 章 界面 API 
7. 绘图 


绘制 线段 


名 徽 信 小 程序 开发 地 基础 入 | ] 


(a) 描 边 路 径 的 效果 


图 11-17 


【 代 人 码 说 明 】 


{ 


this.ctx=wXxX.createCanvasContext ('myCanvas') 


20°05 


全 三 DEMO 


第 11 章 界面 API 
7. 绘图 


绘制 线段 


已 微 信人 小 程序 开发 零 基础 入 门 


(b》 填充 路 径 的 效果 
绘制 线段 的 简单 应 用 
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本 示例 在 path.wxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 显示 描 边 路 径 和 填充 路 径 的 三 


角形 图 有 柔 ， 


对 应 的 自 定义 函数 分 别 是 strokePathO0 和 flPathO 。 在 pathjs 中 首先 定义 了 


drawSampleO 方 法 用 于 绘制 一 个 三 角形 ， 该 图形 的 3 个 坐标 点 分 别 为 (130.73)、(225，225) 和 


E32 
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(75，225)。 在 strokePathO0 和 fllPathO 方 法 分 别 调用 drawSample0 方 法 绘制 基础 图 像 ， 然 后 设 
置 务 笔 闫 色 并 绘制 图 形 。 

在 图 11-17 中 ， 图 (a) 为 手边 路 径 的 效果 ， 此 时 绘制 出 红色 边框 的 空心 三 角形 ; 图 (b) 
为 填充 路 径 的 效果 ， 此 时 绘制 出 填充 蓝 色 的 实心 三 角形 。 

绘制 圆 缴 

除了 下 线路 径 外 ， 小 程序 还 可 以 使 用 男 布 对 象 的 arc0 方 法 绘制 圆 跌 路径 。 

其 基本 语法 格式 如 下 : 
Ctx.arcl(lx, Yr adius,: StartAngle, endAngle, anticlockwise) 

arc0 函 数 共 包含 了 6 个 参数 ， 说 明 如 下 : 

。 x 和 yy 表示 圆心 在 (x;y) 坐 标 位 置 上 ; 

e。 radius 为 加 弧 的 半径 ， 默 认 蛙 位 为 像 系 ; 

。 startAngle 为 开始 的 角度 ，endAngle 为 结束 的 角度 ; 

e anticlockwise 指 的 是 绘制 方向 ， 可 填 入 一 个 布尔 值 ， 其 中 true 表示 有 顺 时 针 绘 制 ，false 

表示 逆 时 针 绘制 。 


注意 : arcO 函 数 中 的 角度 单位 是 弧度 ， 在 使 用 时 不 可 直接 填 入 度数 单位 ， 需 要 进行 转换 。 
转换 公式 如 下 : 
弧度 =m/180x 度 数 
人 在 JavaScript 中 转换 公式 的 写法 如 下 : 


radians=Math.PI/180*degrees 


其 中 特殊 弧度 半圆 (180°?) 转换 后 弧度 为 rx， 圆 (360°) 转换 后 弧度 为 2r。 在 开发 过 程 
中 用 尸 大 直到 这 两 种 情况 可 以 免 于 换算 ， 和 直接 使 用 转换 结 末 。 
绘制 贺 弧 时 的 旋转 方 和 同和 对 应 的 弧度 如 图 11-18 所 示 。 


,下 


图 11-18 ”绘制 圆 缴 时 的 旋转 方向 和 弧度 
由 图 11-18 可 见 ， 三 点 钟 方 同 是 起 始 位 置 ， 每 顺 时 和 针 旋转 90? 等 同 于 增加 了 zw2 的 弧度 。 
例如 绘制 一 个 圆心 在 坐标 (100,.100)、 半 径 为 50 像 系 的 圆 形 : 


Ctx.arc{tliO0, 100, 50, O00. Math.Pl*2, true)s 


Ej 由 于 圆 形 是 旋转 360" 的 特殊 圆 踊 ， 看 不 出 顺 时 针 和 所 时 针 的 区 列 ， 医 
下 Er 用 于 规定 绘制 方向 的 最 后 一 个 参数 填 入 true 或 false 均 可 。 
视频 讲解 


i 


On 
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【 例 11-14】 别 面 API 之 绘制 圆 压 的 综合 应 
WXMIL (pages/demo07/arc/arc.wxml) 文件 代码 如 下 : 


。 <VIew Class='title'>i. 给 图 </view> 
。 <VIeEw Class='"'demo—box'> 


<view class='title'> 绘 制 圆 弧 </view> 
<Canvas canvas-id='myCanvas'" style='pbporaqder:1rpx solid'></canvas> 


. </view> 


JS (pages/demo07/arc/arc.js) 文件 代码 如 下 : 


1. Page ({ 

onLoad: function(options) I{ 

2 / /创建 男 布 上 下 文 

站 const ctx=wx.createCanvasContext ("myCanvas') 
人 

6 . // 设 置 填充 闫 色 为 吐 色 

A ctx.setF1illStylel yellow") 

38. 

9. / /绘制 圆 形 的 脸 ， 并 填充 为 黄色 

10. ctx.beginPath th) 

下 下 二 ctx..arc{tlo0, 1 0 上 0U， 0O, Math.PLl * 2, true) 
Ma ctx.strokerl) 

13: / /如 采 不 坝 要 勺 勒 脸 的 轮廓 ， 此 人 句 可 省 略 

14. el 

1 - 

16. / /设置 填充 闫 色 为 黑色 

Ls ctx. setFillistylilel( black"} 

18. 

19 . / /填充 黑色 的 左 眼 

0 - ctx.beginPath() 

A ctx..arc{(tl190, 130,. 10,. OO, Math.PLl + 2, true) 
We el 

3. 

24. / /填充 黑色 的 右 眼 

Pd ctx.beginPath () 

A+ ctx.arc{(lili0, 130, 10,. O00, Math.PLl + 2, true) 
21 ctx- £11LL() 

28 

29. /7 绘制 市 有 弧度 的 笑容 

30 - ctx.beginPath()} 

| ctx.arc{(l150, 160, 50, 0O0, Math.PI, false) 
32. ctx.stroke rl() 

0 

34 / /全 部 绘制 到 画布 上 

本 ctx.drawt) 

00 | 

dy 


运行 效果 如 图 11-19 所 示 。 
【代码 说 明 】 
本 示例 为 绘制 圆 弧 的 综合 应 用 ， 通 过 绘制 填充 圆 形 〈 脸 和 眼睛 ) 以 及 描 边 圆 弧 〈 微 笑 的 


嘴 ) 形成 一 个 笑脸 图 案 。 需 要 注意 的 是 , 重新 设置 setFillStyle0 的 参数 意味 着 重 置 画笔 的 默 
颜色 ， 新 的 颜色 默认 用 于 绘制 后 续 的 所 有 内 容 ， 直 到 再 一 次 重新 设置 setFillStyle0 的 参数 值 。 
因此 ， 如 果 需 要 给 多 个 图 形 填充 不 同 的 颜色 ,每 次 需要 重新 设置 setFillStyle0 的 参数 值 。 本 例 
题 就 是 在 填充 了 黄色 的 圆 脸 之 后 重新 设置 了 setFillstyle0 的 值 为 黑色 才 继 续 填 充 眼睛 。 
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绘制 曲线 

在 小 程序 中 绘制 曲线 的 原理 来 目 于 贝 蹇 尔 曲线 〈Bezier Curve)。 贝 窄 尔 曲线 又 称 为 贝 兹 
曲线 或 者 贝 济 埃 曲 线 ， 由 法 国 数学 家 Pierre Bezier 发 明 ， 是 计算 机 图 形 学 中 非常 重要 的 参数 
曲线 ， 也 是 应 用 于 2D 图 形 应 用 程序 的 数学 曲线 。 贝 守 尔 曲线 由 曲线 与 节点 组 成 ， 下 点 上 有 有 
控制 线 和 控制 点 可 以 拖 动 ， 曲 线 在 节点 的 控制 下 可 以 伸缩 (如 图 11-20 所 示 )。 一 些 矢量 图 形 
软件 用 其 来 精确 地 绘制 曲线 ， 例 如 Adobe Photoshop、Adobe Illustrator 等 。 
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图 11-19 ”绘制 圆 弧 的 综合 应 用 11-20 ”由 塞 尔 曲 线 (来 源 : 万 维 网 联盟 W3C，2013 年 ) 


贝 答 尔 曲线 一 般 用 来 绘制 较为 复杂 的 规律 图 形 。 根 据 控制 点 的 数量 不 同 ， 贝 窒 尔 曲线 分 
为 二 雇 方 贝 葵 尔 曲 线 和 三 钦 方 贝 具 尔 曲线 。 
二 庆 方 贝 豆 尔 曲线 的 语法 结构 如 下 : 


ctx.quadraticCurveTo(cplx, cply, xr 了) 


其 中 (cplx,cply) 为 控制 点 的 坐标 ，(x;y) 为 结束 所 的 坐标 。 
三 次 方 册 才 尔 曲线 的 语法 结构 如 下 : 


Ct=bezierCurveTlTo(lcpnlxs cply, CPx CPiYvyr Xr WV 


S 回 其 中 (cp1x:cp1y) 为 控制 点 1 的 坐标，(cp2x,cp2y) 为 控制 点 2 的 华 标 ，(xy) 
一 
下 x Tr Eh 为 结束 所 的 坐标 。 
号 和 


1 【 例 11-1S】 界面 API 之 绘制 曲线 的 综合 应 用 
WXML (pages/demo07/bezier/bezier.wxml) 文件 代码 如 下 : 


视频 讲解 
1 <view ElIass=ETETET 7 站 国 </Uew> 


2. <View Cass= aqemo 一 口 CD 和 > 
有 < TEN Class="'title' > 和 使 用 三 次 见 塞 尔 曲线 绘制 爱心 </view> 
4. <Canvas canvas—id='myCanvas' style='horder:1rpx solid'></canvas> 
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5. </view> 
JS (pages/demo07/bezier/bezier.js〉 文 件 代 码 如 下 : 


1]. Page l(t{ 

2 onLoad: function (options) I 

3 // 创 建 男 布 上 下 文 

4. const ctx=wx.createCanvasContext ("myCanvas'") 

5 / /设置 填充 闫 色 为 红色 

c Six SeEtEliLIiStEviel red ys 

7 // 三 次 贝 寨 尔 曲 线 

8. Ctx.beginpath(); 

ha ctx.moveTo(90, 950)} 

10- ctx.bezierCurveTo(90, os2, Bo, A0,. 虽 D 和) 

| 必 本 Ctx.bezlierCurveTo(t3o,. 40,. 3 AD do ID > 
业 Ct -bezlerCurveTo(l3s 90. oor 1 330. 135}s 

| NE 本 ET 
14. ctx.bezierCurveTo(ldo, TI.o, lA5,. A0,. 11lo, 40)5; 
二 Ctx.bezierCurveTo(l00, A0,. 9590 二， 930, Do} 

16. mr 

1 7 / /绘制 到 画布 上 

se ctx.drawt{) 

有 

20 . 上 上) 


运行 效 示 如 图 11-21 所 示 。 
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图 11-21 绘制 曲线 的 综合 应 用 


【代码 说 明 】 

本 示例 综合 应 用 三 次 贝 塞 尔 曲线 绘制 了 红色 爱心 图 案 。 与 矢量 软件 不 同 的 是 ， 小 程序 编 
程 时 没有 贝 塞 尔 曲线 预览 图 。 在 没有 直接 视觉 反馈 的 前 提 下 ， 绘 制 复杂 的 曲线 图 形 显得 较为 
困难 ， 需 要 花费 更 多 的 时 间 进行 绘制 。 由 于 本 例 需 要 有 一 定 的 数学 基础 ， 这 里 可 以 仅 作 了 解 。 
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11.7.4 绘制 文本 
填充 文本 
小 程序 提供 各]TextO 方 法 用 于 在 画布 上 绘制 实心 文本 内 容 ， 其 语法 结构 如 下 : 
ctx.fillText (text, xXx, Vy: maxWidth) 
其 参数 议 明 如 下 : 
。 text 为 String 类 型 ， 表 示 文 本 内 容 ， 实 际 填写 时 需要 在 文本 内 容 的 前 后 加 上 引号 。 
。x 和 y 均 为 Number 类 型 ， 表 示 文 本 左上 角 将 被 绘制 在 画布 的 xj) 坐标 上 。 
。maxWidth 为 Number 类 型 ， 是 可 选 参数 ， 指 的 是 绘制 文本 的 最 大 宽度 。 
例如 : 


ctx= fil1lText(" 你 好 '， 20; 30) 
上 述 代 码 表 示 以 画布 坐标 (20,30) 的 位 置 作为 文本 的 左上 角 绘 制 “ 你 好 ”两 个 字 。 


设置 字体 大 小 
小 程序 提供 setFontSize0O 方 法 用 于 设置 字体 大 小 ， 其 语法 结构 如 下 : 


ctx.setEFontSize (fontSize) 


其 中 参数 fontSize 是 Number 类 型 ， 表 示 字 体 的 字号 大 小 。 

例如 : 
ctx.setEFontSize (20) 

上 述 代码 表示 字体 的 字号 为 20 号。 

设置 文本 基准 线 

小 程序 提供 setTextBaselineO 方 法 用 于 设置 文本 的 水 平方 回 基 准 线 ， 其 语法 结构 如 下 : 
ctx.setTextBaseline (textBaseline) 
ctx.textBaseline—textBaseline // 从 基础 库 1.9.90 开始 支持 


其 中 参数 textBaseline 是 String 类 型 ， 可 选 值 为 top'、'bottom'、'middle'"、'normal'， 分 别 
表示 水 平 基 准 线 在 文字 的 上 方 、 下 方 、 中 同和 第 规 4 种 效果 。 参 照 效 果 如 图 11-22 所 示 。 


图 11-22 文本 基准 线 参 上 照 效果 


例如 : 


ctx.setBaseline('top") 


上 述 代码 表示 水 平 基准 线 变 置 在 文字 的 上 方 。 
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设置 文本 对 齐 万 式 

小 程序 提供 setTextAlign(0) 方 法 用 于 设置 文本 的 对 齐 方式 ， 其 语法 结构 如 下 : 
ctx.setTextAlign (align) 

或 
Ctx CextAligrn aliqn // 从 基础 库 1.9.90 开始 支持 


其 中 参数 align 是 String 类 型 ， 可 选 值 为 left'、'center、'right， 分 别 表示 左 对 章 、 居 中 和 
右 对 齐 3 种 效果 。 参 照 效果 如 图 11-23 所 示 。 


extAlign=|eft 
textAllgm=center 


textAlign=righ 


图 11-23 ”文本 对 齐 万 式 人 参照 效 果 
例如 : 
ctx. setTextAligntl CEnm 上 ET ) 
上 述 代 码 表 示 将 文本 设置 为 后 中 显示 。 


设置 字体 风格 
在 绘制 之 前 也 可 以 使 用 画布 上 下 文 对 象 的 font 属性 自 定 义 字 体 风 格 ， 其 语法 结构 如 下 : 


ctx.font=value 


参数 value 的 默认 值 为 10px sans-serif， 表 示 字 体 大 小 为 10px、 字 体 家 族 为 sans-serif。 
value 文 持 的 属性 如 下 。 

e style: 字体 样式 ， 仅 文 持 italic、oblique、normal。 

。weight: 字体 粗细 ， 仅 文 持 normal、bold。 

e size: 字体 大 小 。 

e family: 字体 族 名 。 注 意 确 认 各 平台 所 文 持 的 字体 。 

上 述 属 性 均 为 可 选 和 内容， 并且 顺序 不 分 先后 。 例 如 : 


ctx.font="bold 20PX sans—seritf™ 
上 述 代 码 表示 设置 字体 为 加 粗 、 大 小 为 20 像 系 、sans-serif 字 体 样式 。 


【 例 11-16】 界面 API 之 绘制 文本 的 综合 应 用 
WXML (pages/demo07/text/text.wxml) 文件 代码 如 下 : 


-<Vview Class="title'>7 多 图 </ iew> 

- <VIiewW Class="demo box'> 

<Vview Class='title'> 给 制 交 不 </view> 

<Canvas canvas-id='myCanvas'" style='border:1lrpx solid'></canvas> 
- </view> 


全 
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JS (pages/demo07/textbtext.js) 文件 代码 如 下 : 


1. BEage (1{ 

onLoad: function(options) | 

Se Const ctx=wx.CreateCanvasContext ("myCanvas') 
4 // 设 置 字号 

林 ctx.setFontSize (40) 


避 

Te // 设 置 文本 水 平 基准 线 

8. ctx.setTextBaselinel(' bottom") 
9. / /填充 文字 

10. ctx.fillText (' 你 好 '， 30，150) 


下 下。 

1 // 设 置 填 元 闫 色 

13. ctx.setFillstylel('green') 
1 // 设 置 文本 水 平 基准 线 

5 ct SetETexEBRaselmnel kop yl 


16-. // 填 元 文字 

1 了 . ctx-fil11mText( 微 信 小 程序 "'，80，150) 
Ls ctx.drawt!() 

19.  ] 

2D-1+} 


运行 效 末 如 图 11-24 所 示 。 
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图 11-24 ”绘制 文本 的 绽 合 应 用 


【代码 说 明 】 

本 示例 在 textjs 的 onLoad0 函 数 中 进行 文本 绘制 ， 并 统一 设置 字号 为 40。 第 一 段 文字 内 
容 为 “你 好 ”， 从 左上 角 坐 标 G30.150) 开 始 绘制 ; 第 二 段 文 宇内 容 为 “ 微 信 小 程序 ”， 从 左上 和 角 
坐标 (80.150) 开 始 绘制 并 设置 填充 颜色 为 绿 包 。 

由 图 11-24 可 见 ， 虽 然 两 段 文字 的 了 坐标 一 致 ， 但 是 由 于 使 用 setTextBaseline0 方 法 设置 
了 不 同 的 水 平 基准 线 (bottom 和 top)， 导 致 “ 你 好 ”在 水 平 基准 线 上 方 、“ 做 信 小 程序 ”在 
水 平 基准 线 下 方 。 
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11.7.5 绘制 图 片 


绘制 原 图 
小 程序 使 尾 


CtX .CrawImage (src, dx, dy); 


语法 结构 如 下 : 


其 中 ，src 是 String 关 型 的 参数 ， 表 示 图 片 资源 的 路 径 ， dx 和 dy 均 为 Number 类 型 ， 指 
的 是 所 绘制 图 片 的 左上 和 角 在 画布 的 (dx,dy) 坐 标 上 。 

缩放 图 片 

图 片 的 大 小 可 以 在 绘制 时 进行 缩放 ， 其 语法 结构 如 下 : 


ctx.drawlImage (src, dx, aqdv dWwidth, dHeight) 


该 方法 比 普通 绘制 图 片 的 方法 多 出 两 个 Number 类 型 的 参数 dWidth 和 dHeight， 分 别 用 
于 规定 图 片 缩放 后 的 宽度 和 高 度 。 

图 片 的 切割 

在 绘制 图 片 时 可 以 根据 实际 需要 对 原 图 进行 切割 ， 只 显示 指定 的 区 域内 容 ， 其 语法 结构 
如 下 : 


ctx.drawlImage (src, sx Sy SWIidth, sHeight, dx, dv dWidth, dHeight) 


该 方法 有 9 个 参数 ， 说 明 如 下 : 

e src 和 是 图 片 资源 的 路 径 地 址 ; 

e sx 和 sy 表示 将 从 原 图 片 的 (sx,sy) 坐 标 位 置 进行 切 制 截图 ; 

。 截图 的 矩形 宽度 为 sWidth， 高 度 为 sHeight: 

。dx 和 dy 表示 切割 后 的 图 片 将 显示 在 画布 的 (dx,dy) 坐 标 位 置 上 ; 


。 在 画布 上 将 截图 的 宽度 缩放 为 dWidth、 高 度 缩放 为 dHeight。 
【 例 11-17】 界面 API 之 绘制 图 片 的 综合 应 后 
本 示例 将 展示 绘制 图 片 的 几 种 绘制 方式 ， 包 括 以 下 内 容 : Te Lh 
e 绘制 原 图 ; 视频 讲解 


。 切割 图 片 并 缩放 。 
WXML (pages/demo07/image/image.wxml) 文件 代码 如 下 : 


1. <view Class="title'>7. 纵 图 </view> 

2. <View Class='demo— box'> 

<view class='title'> 绘 制图 片 </view> 

4. <Canvas canvas-id='myCanvas'" style='border:lrpx solid'></canvas> 

ee <button type='primary" size="'mini" bindtap="'drawlmage0l1'" > 绘制 原 图 </button> 
. - <button type='primary" size="'mini" bindtap="drawlmage02" > 缩放 图 片 </button> 
1. <button type='primary' size='minirbindtap='drawIimage031> 图 片 切割 </button> 
8. </viewy> 


WXSS (pages/demo07/image/image.wxss) 文件 代码 如 下 : 


1 。 buttont 
人 margin: lO0rpx; 
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JS (pages/demo07/imasge/image.js) 文件 代码 如 下 : 


1. Bage(t 

2 / /绘制 原 图 

drawlmage01: function() ({ 

4. let ctx=this .ctx 

号 ctx.drawImage ('/images/demo07/weixin.jpg',r 0, 0) 
6 ctx.draw!l) 

v 上 7 

8 /7 缩放 图 片 

= drawImage02: function() 1 

10. let ctx=this .ctx 

Ts ctx.drawImage ('/images/demo07T/weixin.jpg', SO, S50, 200, 200) 
12. ctx .drawt() 

13. }, 


14. // 图 片 切 制 
15. drawlmage03: function(} 1{ 


16. Jet ctx=this .ctx 

I ctx.drawImage ('/images/demo07/weixin.jpg', 210, 90, 160, 160, 5O, 50O, 200, 200) 
18. ctx.drawt) 

13. 上 

20. onLoad: functionl(options) { 

Wd this.ctx=wx .createCanvasContext ('myCanvas") / /创建 画布 上 下 文 

”2s 1 

3.1) 


运行 效 末 如 图 11-25 所 示 。 
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(a) 纵 制 原 图 (b) 缩放 图 片 (c) 切割 图 片 并 缩放 
图 11-25 绘制 图 片 的 绪 合 应 用 
【代码 说 明了】 
本 示例 选用 了 一 张 比 画布 尺寸 大 的 图 片 素材 (/images/demo07/weixin.jpg) 作为 测试 案例 。 
在 Image.wxml 中 包含 了 3 个 <button> 按 钮 分 别 用 于 绘制 原 图 、 缩 放 图 片 和 切割 图 片 并 缩放 ， 
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对 应 的 目 定 义 图 数 分 别 是 drawImage010、drawImage020 和 drawImage030。 在 image.js 中 定 
义 drawImage010 方 法 用 于 从 画布 的 左上 角 原 点 处 开始 绘制 图 片 ， 定 义 drawImage020 方 法 用 
于 在 画布 坐标 (50.50) 处 开始 绘制 图 片 ， 并 且 把 原 图 缩放 成 宽 、 高 均 为 200 像素 的 效果 :定义 
drawImage030 用 于 以 原 图 的 C210.90) 坐 标 作 为 左上 角 切 割 一 块 宽 、 高 均 为 160 像素 的 图 片 ， 
将 其 左上 角 点 显示 在 画布 (30.50) 的 位 置 上 并 放大 至 宽 、 凯 均 为 200 保 系 。 

在 图 11-25 中 ,图 (a) 为 绘制 原 图 效果 ,此 时 图 片 并 不 完整 ， 只 能 显示 画布 区 域 的 内 容 ， 
图 (b) 为 缩放 图 片 的 效果 ， 此 时 图 请 大 小 发 生 了 改变 ; 图 (ce) 是 切割 图 片 后 的 效果 ， 此 时 
可 以 只 有 显示 其 中 的 做 信和 图 标 。 


颜色 透明 度 


小 程序 可 以 使 用 setGlobalAlpha0 生 成 半 透 明 色 作为 画布 上 的 图 形 轮廓 或 填充 颜色 。 
其 语法 结构 如 下 : 


ctx.setGlobalAlpha (alpha) 
或 
ctx.globalAlpha=alpha // 从 基础 库 1 .93.390 起 支持 
画布 中 指定 的 图 形 会 被 alpha 的 属性 值 影响 透明 度 ， 有 效 值 范围 为 0.0~1.0， 其 中 0.0 表 


示 完 全 透明 ，1.0 表示 完全 不 透明 。 
例如 设置 透明 度 为 0.5 ( 半 透 明 )， 写 法 如 下 : 


ctx.setGlobalAlpha (0.95) 
globalAlpha0 适 合 批量 设 壮 图 形 闫 色 。 


【 例 11-18】 表面 API 之 颜色 透明 度 的 简单 应 用 
WXML (pages/demo07/alpha/alphawxml) 文件 代码 如 下 : 


. <view Elass='title">7 过 图 </iew> 视频 讲解 
-<VleW Class="demo—box'> 

<view Class='tit1l1e> 疡 色 透 明度 </view> 

<Canvas canvas—id='myCanvas" style='border:1rpx solid'></canvas> 
<button tvypeQ—'primary' Size—"'mini'" bindtap-"'setAlpha01'3 丰 史明 </button> 
<button type="'primary' SiZe="mini" bindtap"'setAlpha02'> 半 透明 </button> 
<button type="primary" Size="mini" bindtap="setAlpha03' > 全 透明 < /Putton> 
. </view> 


J] 


WXSS (pages/demo07/alpha/alpha.wxss) 文件 代码 如 下 : 


一 


. buttont 
二 margin: lO0rpx; 
3 0 


JS (pages/demo07/alpha/alpha.js) 文件 代码 如 下 : 


1 。 Page It 
/ /绘制 基本 图 形 


drawBox: function() If 


a 
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4. let ctx=this.ctx 

I cix. setF1iliStylel GEeem )} 

6. ctxsfilliRecttliossr tor lo0. Lo0} 
Rs ctx.drawt) 

8. 上 ， 


9.  // 不 透明 


10. setAlpha0l: functiont(} 1({ 


11. Tet Ctx=thiss citiz 

有 ctx.setGlobalAlpha (1) 
13;, this.drawBoxt{) 

14. |， 


15。 W/W/ 半 透明 


16- setAlpha02: function(} 1{ 


| let ctx=this .ctx 

1B8. ctx.setGlobalAlpha (0 .oo) 
与 this.drawBoxt() 

20- |， 


21- /7/ 全 透明 
22. SetAlpha03: function() { 


a let ctx=this .ctx 

Ws ctx.setGlobalAlpha(0) 

es this.drawBoxt{) 

26- 上 

21. onLoad: function(options) { 

38 this.ctx—wx.createCanvasContext (mv Canvas") / /创建 画布 上 下 文 
Wa BE this.drawBox() 

30。. 1} 

31 .1}) 


运行 效果 如 图 11-26 所 示 。 
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颜色 透明 度 颜色 透明 度 颜色 透明 度 


心 微 信 小 程序 开发 零 基础 入 门 已 微 信 小 程序 开发 和 地基 础 入 门 古 微 信 小 程序 开发 零 基 础 入 门 


(a) 不 透明 效果 (b) 半 透 明 效果 (Cc) 全 透明 效果 
图 11-26 颜色 透明 度 的 简单 应 用 
【代码 说 明 】 
本 示例 在 alpha.wxml 中 包含 了 3 个 <button> 按 钮 分 别 用 于 显示 不 透明 、 半 透明 和 全 透明 
的 图 像 效 果 ， 对 应 的 目 定 义 图 数 分 别 是 setAlpha010、setAlpha020 和 setAlpha030。 在 alpha.js 
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中 前 先 定义 drawBox0 方 法 用 于 绘制 一 个 左上 角 在 (73,7S)、 宽 和 融 均 为 150 像素 的 绿色 实心 矩 
形 ， 然 后 在 setAlpha010、setAlpha020 和 setAlpha030 中 均 使 用 setGlobalAlpha0 设 置 颜 色 透 明 
度 ， 将 参数 分 别 设置 为 1、0.5 和 0。 

在 图 11-26 中 ， 图 (a) 为 不 透明 效果 ， 窍 形 为 绿色 ; 图 (b) 为 半天 明 效果 ， 和 矩形 闫 色 
变 淡 : 图 (c) 是 全 透明 效 末 ， 已 经 完全 看 不 到 邢 形 。 

线条 样式 

1) 设置 线条 宽度 

小 程序 使 用 setLineWidthO 设 置 线条 的 宽度 ， 其 语法 格式 如 下 : 


ctx.setLineWidth (lineWidth) 


或 
ctx.lineWidth=lineWidth // 从 基础 库 1.9.90 起 支持 
其 参数 lneWidth 是 Number 类 型 ， 默 认 单 位 为 px。 
例如 : 
ctx.setLineWidth(10) 
上 述 代码 表示 设置 线条 宽度 为 10 像素 。 


2) 设置 线条 端点 样式 
小 程序 使 用 setLmeCap0 设 置 线 条 端点 样式 ， 其 语法 格式 如 下 : 


ctx.setLineCap (lineCap) 


ctx.lineCap=lineCap // 从 基础 库 1.9.90 起 支持 


其 中 参数 lineCap 表示 线段 两 边 项 疹 的 形状 ， 有 3 种 属性 值 ， 说 明 如 下 。 

。 butt: 线段 的 末端 以 方形 结束 ， 该 属性 值 为 默认 值 。 

e round: 线段 的 末 关 以 半圆 形 凸 起 结束 。 

e square: 线段 的 末端 加 了 一 个 方形 ， 该 方形 的 宽度 与 线段 同 宽 ， 高 度 为 宽度 的 一 半 。 
具体 的 显示 效果 如 图 11-27 所 示 。 


butt 


round 
square 
11-27 设置 lineCap 为 不 同属 性 值 对 应 的 效果 


例如 : 


ctx.setLineCapl('" square") 


上 述 代码 表示 设置 线条 端点 为 方形 效果 。 
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3) 设置 线条 交点 样式 
小 程序 使 用 setLineJoin0 设 置 线条 端点 样式 ， 其 语法 格式 如 下 : 


ctx.setLineJoin (lineJoin) 


ctx.l1ineJoin=lineJoin / /从 基础 库 1.9.90 起 支持 


其 中 参数 lineJoin 表示 线段 之 间 连 接 处 的 抛 角 样式 ， 有 3 种 属性 ， 说 明 如 下 。 
。 miter: 线段 连接 处 的 抛 角 为 兴 角 ， 该 属性 值 为 默认 值 。 

。round: 线段 连接 处 的 扔 角 为 圆 形 。 

e。 bevel: 线段 连接 处 的 扔 角 为 平角 。 

具体 的 显示 效果 如 图 11-28 所 示 。 


之 之 之 


miter round bevel 


图 11-28 ”设置 lineJoin 为 不 同属 性 值 对 应 的 效果 
例如 : 


ctx.setLineJoin(' round'") 


上 述 代码 表示 设置 线段 连接 处 的 拐角 是 圆 形 效果 。 
4) 设置 虚线 效果 
小 程序 使 用 setLineDash0 设 置 线条 为 虚线 效果 ， 其 语法 格式 如 下 ; 


ctx.setLineDash (pattern, offset) 


其 参数 说 明 如 下 。 

。 pattern: Array 数组 ,表示 一 组 摘 述 交 蔡 绘制 线段 和 间距 《坐标 空间 单位 ) 长 度 的 数字 ; 
e offset: Number 类 型 ， 表 示 虚 线 仿 移 量 。 

例如 : 


ctx.setLineDash([l10, Sl, 0) 


上 述 代 码 表 示 设 置 线 条 样式 为 10 像素 的 线段 与 5 像素 的 间隔 交 蔡 出 现形 成 虚线 。 

读者 需要 注意 一 种 特殊 情况 ， 当 数组 元 妹 为 柯 数 时 所 有 数组 元 和 际会 目 动 重复 一 次 。 例 如 
使 用 setLineDash([5, 10, 5]) 方 法 设置 线条 样式 , 实际 上 系统 会 认为 是 [5, 10, 5, 5, 10, 5] 的 形式 。 

5) 设置 最 大 倾斜 

小 程序 使 用 setMiterLimaitO 设 置 最 大 斜 接 长 度 ， 斜 接 长 度 指 的 是 在 两 条 线 交 汇 处 内 角 和 
外 角 之 间 的 距离 。 该 接口 只 有 当 setLineJoin0 参 数值 为 miter 时 才 有 效 。 

其 语法 格式 如 下 : 


ctx.setMiterLimit (miterLimit) 
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或 


C 二 区-miterLimit=miterLimit // 从 基础 库 1.9.90 起 支持 


其 中 参数 miterLimit 为 Number 类 型 ， 表 示 最 大 笠 接 长 度 。 
例如 : 
ctx.setMiterLimit (4) 
上 述 代 码 表 示 设 置 最 大 笠 接 长 度 为 4。 
将 miterLimit 参数 值 分 别 设置 为 1、2、3、4， 显 示 效 果 如 图 11-29 所 示 。 


图 11-29 ”设置 miterLimit 为 不 同属 性 值 对 应 的 效果 
如 果 人 设置 超过 最 大 冬 接 长 度 ， 连 接 处 将 以 lineJoin 为 bevel 来 显示 。 
【 例 11-19】 表面 API 之 线条 样式 的 简单 应 用 
WXML (pages/demo07/line/line.wxml) 文件 代码 如 下 : 


1. <view class='title'>7. 公 图 </view> 

2. <View Class='demo—Dbox'> 

3 <view class='title'>»> 线 条 样式 </view> 

4. <Canvas canvas—id='myCanvas' style='horder:1rpx solid'></canvas> 

eh <button type='primary" Size~= "mini" bindtap="setLineWidth" > 线条 加 粗 </button> 
6. <button type='primary' size='mini" bindtap-"'setLineJoin'> 圆 形 区 扩 </button> 
ps <button type= "primary" Size="mini" bindtap=" setLineDash' > 虚线 效果 </button> 
8. <button bindtap="'reset'> 还 原 </button> 

9. </view> 


JS (pages/demo07/line/line.js〉 文件 代 但 如 下 : 


1. PEage(t 

2. /7/ 绘 制 基本 图 形 

时 drawSample: function() { 
4. 下 二 下 
5 / /绘制 三 角形 

避 - ctx.begijnPath () 
ctx.moveTo(lo0, >) 
时 二 ctx lineTot(l225.229) 
i 全 二 本 二 而 已 正品 过 二 
10. ctx.closePathi() 

i mi ctx.strokerl) 

12- ctx.drawt) 

dy 


上 
14. // 线 条 加 粗 
12- setLineWidth: function(})} 1 
16. this.ctx.setLineWidth (20) 
us this.drawSsample () 
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18. 
1 bs 
2D. 
pe 
这 
A 
2 - 
ee 
26. 
a 
ea 
30: 
3 
ee 
3 
EE 
二 要 
Se 
二 和 
40 . 
41. 


42.1}) 


}, 
// 圆 形 交 扣 


setLineJoin: function(} 1 
this.ctx.setLineJoin('" round") 
this.drawSsample () 

}， 

/ /虚线 效果 

setLineDash: function() 1 
this.ctx.setLineDash(|[l10,10|1.,2) 
this.drawSsample () 

bs 

/ /还 原 

reset:function()}t 
let ctx=this .ctx 
ctx.lineWidth=10 
ctx.lineJoin='miter" 
ctx.setLineDash([l10,.10|.,0) 
this.drawSsample () 

bs 

onLoad: function(options) {1{ 
this.ctx=wXxX.createCanvasContext ('myCanvas') 
this.ctx.l1linewWidth=—=10 
this.drawSsample () 

} 


运行 效果 如 图 11-30 所 示 。 
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(a) 页 面 初始 效果 (b) 线条 加 粗 效 果 


图 11-30 ”线条 样式 的 简单 应 用 
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名 微 信 小 程序 开发 零 基 础 入 门 已 微 信 小 程序 开发 零 基础 入 门 


(c) 圆 形 交 点 效果 (d) 虚线 效果 


图 11-30〈 续 ) 


【代码 说 明 】 

本 示例 在 lne.wxml 中 包含 了 3 个 <button> 迷 你 按钮 分 别 用 于 显示 加 粗 、 圆 形 交 点 和 虚线 
的 线条 样式 ， 对 应 的 目 定 义 图 数 分 别 是 setLineWidth()、setLineJomO 〇 和 setLineDashO:， 男 有 一 
个 <button> 普 通 按钮 用 于 还 原初 始 绘图 效果 ， 对 应 的 目 定 义 图 数 是 resetO0。 在 linejs 中 首先 定 
义 drawSample0 方 法 用 于 绘制 一 个 三 角形 ， 并 在 onLoad0 国 数 中 设置 其 初始 线条 宽度 为 10 
像 了 系 ; 然后 定义 setLineWidth0 方 法 改变 线条 宽 腻 为 20 像 系 ; 定义 setLineJoin0 方 法 将 三 角形 
的 3 个 项 痛 改 为 圆 跌 形 ; 定义 setLineDashO 设 置 三 角形 边框 为 虚线 效 末 ， 每 个 线段 长 度 均 为 
10 像 妹 。 

在 图 11-30 中 ， 图 (a) 为 页 面 初始 效果 ， 此 时 是 一 个 线条 宽度 为 10 像 系 的 三 角形 ; 图 
(b) 为 线条 加 粗 效 果 : 图 (c) 为 圆 形 交 点 效果 ; 图 (d) 为 虚线 边框 效果 。 

新 变样 式 

在 小 程 厅 中 可 以 使 用 颜色 渐变 效果 来 设置 图 形 的 轮 慷 或 填 元 闫 色 ， 分 为 线性 渐变 与 圆 形 
渐变 两 种 。 首 先 创建 具有 指定 渐变 区 域 的 canvasGradient 对 象 。 

创建 线性 渐变 canvasGradient 对 象 的 语法 格式 如 下 : 


Const grd=ctx.createLinearGradient (xO, vyO, xl, YY]) 
其 中 (x0.y0) 表 示 渐 变 的 声 始 位 置 坐标 ， 人 1yl1) 表 示 渐 变 的 结束 位 置 坐 标 。 
创建 圆 形 渐变 canvasGradient 对 象 的 语法 格式 如 下 : 


Const grd~=ctx.createCircularGradient (x vr 工 ) 


这 表示 渐变 是 圆心 在 (x,y) 上 的 半径 为 r 的 圆 。 圆 形 渐变 的 起 点 在 圆心 ， 终点 在 外 围 圆 环 。 
使 用 这 两 种 渐变 方法 创建 canvasGradient 对 象 后 均 可 继续 使 用 addColorStopO 方 法 为 渐变 


过 7。 微 信 小 程序 开发 零 基础 入 门 


效果 定义 颜色 与 渐变 点 。 其 语法 格式 如 下 : 


grd.addColorSstop (position, color) 


wr] 其 中 position 参数 需要 寺 写 一 个 0 一 1 的 数值 ， 表 示 潮 灾 点 的 相对 位 置 ， 
深 必 ZT 例如 0.5 表示 在 渐变 区 域 的 正中 间 ; color 参数 需要 填写 一 个 有 效 的 闫 色 值 。 
上 以 上 两 种 方法 所 创建 出 来 的 颜色 渐变 效果 均 可 当 作 一 种 特殊 的 颜色 值 赋 


【 例 11-20】 界面 API 之 渐变 样式 的 综合 应 用 
WXMIL (pages/demo07/gradient/gradient.wxml) 文件 代码 如 下 : 


视频 讲解 


1 
3 
4. 
人 
Er 
了 


.<view Class="title'>7. 谷 图 </view> 

- <View Class="demo— Dox'> 

<view class='title'> 源 变样 式 </view> 

<Canvas canvas—-id='myCanvas'" style='border:lrpx solid'></canvas> 
<button type="primary" SizZe= "mini’' bindtap="linear' > 线性 渐变 </button> 
<button 七 YPe= PITI1Imary Size= mlInlI” blInatap= CILITCULaTr- > 圆 形 渐变 </button> 
- < /view> 


WXSS (pages/demo07/gradient/gradient.wxss) 文件 代码 如 下 : 


1 。 buttont 
margin: lO0rpx; 


[5 


| 


JS (pages/demo07/gradientygradientjs) 文件 代码 如 下 : 


1. Page l(t{ 

2.  // 线 性 渐变 

3 linear: function() { 

4. let ctx=this .ctx 

5. / /创建 渐变 

6. Var grd=—ctx.createLinearGradient (0 OO,@ 200, 200) 
ss grd.addColorstop (0, ‘blue"') 

a grd.addColorStop(l, ‘lightblue") 


// 田 图 形 

ctx.setFillSstyle (grd) 

| ctx-.filliRectt(tsD0,. 50. 200. 200) 
V2 ctx.drawt) 

13. 1 

14. // 圆 形 渐变 

15. clircular: functiont} 1{ 

16. let ctx=this .ct 

LT / /创建 渐变 

18. var grd~=ctx.createCircularGradient (150, 150, 100) 
TL grd.addColorstop(0, ‘purple") 
0. grd.addColorSstop(l, ‘white") 
2 // 男 图形 


DD 
中 
和 


二 ctx. setFililsStyle (grd) 

之 卫 - ctx.fillRectto0, 0, 200, 200} 

a ctx.drawt) 

3. 上 

26. onLoad: function(options) { 

is this.ctx=wX.createCanvasContext ('myCanvas') / /创建 画布 上 下 六 
28. 】}】 


za1) 
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运行 效 未 如 图 11-31 所 示 。 


重量 量 生 量 由 写 人 是 at 3 10:16 O00% i ' 


10-16 


例题 DEMO 鸽 lBDEMG 


第 11 章 界面 API 
7. 绘图 


第 11 章 界面 API 


7. 经 图 


渐变 样式 渐变 样式 


名 微 信 小 程序 开发 零 基础 入 门 


局 微 信 小 程序 开发 零 基 础 入 门 


(a) 线性 渐变 效果 (b) 圆 形 渐变 效果 
图 11-31 渐变 样式 的 综合 应 用 


【代码 说 明 】 

本 示例 在 gradient.wxml 中 包 侣 了 两 个 <button> 投 钮 分 别 用 于 泽 示 线性 渐变 和 图形 渐变 效 
果 ， 对 应 的 目 定 义 函 数 分 别 是 lnear0 和 circular0。 在 gradient.js 中 定义 linear0 方 法 用 于 显示 
一 个 实心 矩形 ， 该 矩形 具有 从 左上 角 蓝 色 到 右 下 角 浅 赣 的 渐变 效果 ;定义 circular0 方 法 用 于 
显示 一 个 实心 圆 形 ， 该 圆 形 具 有 从 圆心 紫色 回 外 逐渐 变 淡 至 白色 的 渐变 效果 。 

在 图 11-31 中 ， 图 (a) 为 线性 渐变 效果 ， 赴 形 的 宽 和 凯 均 为 200 像 系 ; 图 (b) 为 圆 形 
渐变 效果 ， 圆 形 的 半径 为 100 像素 。 

阴影 样式 

小 程序 使 用 setShadow0 〇 方法 为 画布 中 的 图 形 或 文本 设置 阴影 效果 ， 其 语法 格式 如 下 : 

ctx.setShadow (offsetX, offsetY, blur, color) 

其 参数 说 明 如 下 。 

e offsetX: Number 类 型 ， 表 示 阴 影 相 对 于 图 形 在 水 平方 同 的 偏 移 。 

。 offsetY: Number 关 型 ， 表 示 了 上 阴影 相对 于 图 形 在 垂 理 方 癌 的 俩 移 。 

e。blur: Number 头 型 ， 表 示 阴 影 的 模糊 程度 ， 数 值 越 大 越 模糊 ， 取 全 范围 为 0 一 100。 

e。 color: Color 类 型 ， 表 示 阴 影 的 颜色 。 


注意 : 上 述 参 数 均 为 可 选 , offsetX、offsetY、 blur 的 默认 值 为 0, color 的 默认 值 为 black。 


例如 : 


微 信 小 程序 开发 零 基础 入 门 
ctx.setShadow (10, 10, 20, 3S1LLver ) 


上 述 代 码 表 示 设 置 一 个 模糊 级 别 为 20 的 银色 阴影 效果 ， 了 上 阴影 相对 于 图 形 往 右边 和 下 方 
均 偏 移 20 像素 的 距离 。 
在 男 布 对 象 中 还 具有 4 个 属性 可 以 用 于 设置 阴影 单项 样式 ， 如 表 11-30 所 示 。 
表 11-30 CanvasContext [ 明 影 效果 相关 属性 


属性 名 称 解 


shadowOffsetX 用 于 设置 阴影 在 入 轴 方 癌 的 延伸 距离 ， 默 认 值 为 0 
shadowOffsetY 用 于 设置 阴影 在 YY 轴 方 同 的 延伸 距离 ， 默 认 值 为 0 
shadowBlur 用 于 设置 阴影 的 模糊 程度 ， 默 认 值 为 0 

shadowColor 用 于 设置 阴影 的 匣 色 ， 默 认 值 为 透明 上 腻 为 0 的 黑色 


因此 前 面 的 代码 也 可 以 修改 为 如 下 与 法 : 


1. ctx.shadowOffsetX=10 

2. Ctx.shadowOoOffsetY=10 

3. Ctx.shadowBlur=20 

4. ctx.shadowColor= ‘silver' 


【 例 11-21】 界面 API 之 阴影 样式 的 简单 应 用 
WXML (pages/demo07/shadow/shadow.wxml) 文件 代码 如 下 : 


! 1 <view Class—"title'>7 他 图 </view> 
. 2. <View Class='demo—box'> 
视频 讲解 3 <view Class='"title'S> 了 阴影 尾 式 </view> 
4. <Canvas canvas—id="myCanvas'" style='border:1lrpx solid'></canvas> 
5 </view> 


JS (pages/demo07/shadow/shadow.js) 文件 代码 如 下 : 


1 。 Page (ll 

Vea onLoad: function (options) I 

ES const ctx~=wx.createCanvasContext ('myCanvas') / /创建 画布 上 下 文 
四 ctx.setFillSsStyle('lightgreen'") / /设置 填充 闫 色 
ctx.setShadow (10, 10, 50, 'grav'") / /设置 阴影 

6 . ctx.fillRect (75,75,150,150) /7/ 设 置 填 苑 起 形 
ctx.draw () // 人 给 图 

Se } 

eo 


运行 效果 如 图 11-32 所 示 。 

【代码 说 明 】 

本 示例 在 shadowjs 的 onLoad0 函 数 中 绘制 了 一 个 左上 角 坐 标 为 (75.73)、 宽 和 高 均 为 150 
的 浅 绿色 实心 矩形 , 并 使 用 setShadow0 方 法 为 其 设置 了 一 个 模糊 级 别 为 50 的 灰色 阴影 效果 ， 
该 阴影 距离 原 矩形 往 右边 和 下 方 均 偏 移 10 像素 的 距离。 

图 案 填 充 

小 程序 使 用 createPattemO 对 指定 的 区 域 进行 图 案 填充 , 该 接口 从 基础 库 1.9.90 开始 支持 ， 
低 版 本 需 做 兼容 处 理 。 其 语法 格式 如 下 ; 


ctx.createPattern (ijmage, repetit1ion) 
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其 参数 说 明 如 下 。 
e。 image: String 关 型 ， 图 索 来 源 ， 仅 文 持 包 内 路 径 和 临时 路 径 。 
e repetition: String 类 型 ， 图 架 草 复 方 同 ， 有效 值 为 repeat、 repeat-x、repeat-y、no-repeat。 


15:10 
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局 微 信 小 程序 开发 零 基础 入 门 


图 11-32 阴影 样式 的 简单 应 用 


【 例 11-22】 界面 API 之 图 案 填 充 的 简单 应 用 
WXMIL (pages/demo07mpattern/pattern .wxml) 文件 代码 如 下 : 


， view Class="title'>7 各 图 - 瑞 色 与 梓 式 /View3 

<V1iew Class='demo—box'> 
<view class='title'> 绘 制图 案 </view> 视频 讲解 
<CaTVaS Canvas——id="myCanvas'" style=‘'border:lrpx solid'> 和 
Canvas > 

. </vVview> 


户 fo 请 


Nn 


JS (pages/demo07/pattern/pattern.js〉 文件 代码 如 下 : 


1. Page (1{ 

2 onLoad: function(options) I{ 

3 const ctx-wx.createCanvasContext ('myCanvas')// 创 建 画 布 上 下 文 

4 const pattern=ctx.createpattern('/images/demo07/sakura.jpg', 'repeat") 
人 ctx.setF1illSstyle (pattern) 


6. ctx.beginPatht{)}) 

和 ctx.arc(lo0,1o0, 100,0,2*Math.PI,true) 
中 ctx.fill() 

ctx.drawt) 

10. } 

11 .}) 


运行 效果 如 图 11-33 所 示 。 

【代码 说 明 】 

本 示例 使 用 了 一 个 时 和 融 均 为 100 像 双 的 图 片 系 材 (/images/demo07/sakura.jpg) 作为 
案 填 充 的 模型 。 在 pattern.js 的 onLoad0 中 使 用 了 createPattermm0 指 定 图 案 来 源 并 要 求 其 在 水 平 


了 中 微 信 小 程序 开发 零 基 础 入 门 


和 和 恰 生 方 癌 艾 喇 复 绘制 ,然后 使 用 setFillStyleO 方 法 设置 该 效 朱 为 国 笔 项 序 特效 ， 最 后 绘制 了 
一 个 圆心 在 (150,150)、 半 径 为 100 像 系 的 圆 形 ， 并 使 用 fI0 方 法 为 其 填充 图 案 。 


生生 生硬 What 全 16:53 1005%, [mul 


© 
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图 案 填充 


名 微 信人 小 程序 开发 和 基础 入 门 


图 11-33 图案 填充 的 简单 应 用 


11.7.7 保存 与 恢复 


在 小 程序 中 save0 和 restore0 方 法 是 绘制 复杂 图 形 的 快捷 方式 , 用 于 记录 或 恢复 画布 的 给 
画 状 态 。 在 绘制 复杂 图 形 时 有 可 能 临时 需要 进行 多 个 属性 的 设置 更 改 例 如 画笔 的 粗细 、 填 
充 颜色 等 效果 )， 在 绘制 完成 后 又 要 重新 恢复 初始 设置 进行 后 续 的 操作 。 


11.7.8 ”变形 与 殉 裁 


图 像 的 变形 

在 小 程序 中 有 4 种 方法 可 以 对 在 男 布 上 绘制 的 内 容 进 行 变 形 处 理 。 

e。 移动 〈translateO0 ): 移动 图 形 到 新 的 位 置 ， 图 形 的 大 小 、 形 状 不 变 。 

e 许 转 (Totate0): 以 画布 的 原点 坐标 (0.0) 为 参照 点 进行 图 形 的 旋转 ， 图 形 的 大 小 、 形 状 
不 要 。 

e。 缩放 〈scale0): 对 图 形 进 行 指定 比例 的 放大 或 缩小 ， 图 形 的 位 置 不 变 。 

。 和 斌 阵 弯 形 〈transformO ): 使 用 数学 窍 阵 多 次 登 加 形成 更 复杂 的 变化 。 

1 ) 移动 

在 小 程序 中 可 以 使 用 translate0 方 法 对 图 形 进行 移动 处 理 。 其 基本 格式 如 下 : 


ctx.translate (Xx, Y) 


其 中 , 参数 x 指 的 是 在 水 平方 同 X 轴 上 的 偏 移 量 , 参数 yY 指 的 是 在 垂 耳 方 各 立轴 上 的 偶 
移 量 。 参 数 为 正 数 表示 按照 坐标 系 的 正方 同 移动 ， 参 数 为 负数 表示 沿 看 坐标 系 的 相反 方 同 移 
动 。 用 尸 也 可 以 理解 为 将 原点 移动 到 指定 的 坐标 (x;y) 上 ， 移 动 效 来 如 图 11-34 所 示 。 
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俩 移 x 


Y 轴 上 新 Y 秽 
图 11-34 ”画布 坐标 系 的 移动 效果 
例如 将 原点 水 平方 同 网 石 移动 100 像 条 ， 牌 直方 癌 个 变 : 
ctx.translate (100,0); 
需要 注意 的 是 ， 每 一 次 调用 translate0 方 法 部 是 在 上 一 个 translate0 方 法 的 基础 上 继续 移 
动 原点 的 位 置 。 例 如 : 


1. ctx.translate (100,0); // 将 原点 水 平 同 右 移 动 100 像素 ， 目 前 位 置 在 (100,0) 
2. ctx.translate (100.,0).;: / /将 原点 继续 水 平 回 右 移 动 100 像素 ， 目前 位 置 在 (200,0) 
3. ctx.translate (0,100); // 将 原点 垂直 加 下 移动 100 像素 ， 目 前 位 置 在 (200, 100) 


此 每 次 都 需要 考虑 当前 原点 的 位 置 才能 进行 正确 的 移动 。 如 果 不 硕 望 ttanslate0 方 法 影 
咱 每 一 次 移动 ， 可 以 使 用 save() 与 restore0 方 法 恢复 原状 。 
2) 旋转 


在 小 程序 中 可 以 使 用 rotate0 方 法 对 图 形 进 行 旋 转 处 理 。 其 基本 格式 如 下 : 


ctx.rotate (angle) 


其 中 angle 参数 需要 填 入 顺 时 针 旋 转 的 角度 ， 需 要 换算 成 弧度 单位 。 如 果 填 入 猴 值 ， 则 
以 道 时 针 旋 转 。 
例如 逆 时 针 旋 转 90?* 的 写法 如 下 : 


ctx.rotate(—Math.PI/2):; 


在 默认 情况 下 ，rotate0 方 法 以 画布 的 原点 坐标 (0,0) 为 参照 点 进行 图 形 的 旋转 ， 如 果 需 要 


指定 其 他 参照 点 ， 也 可 以 事先 使 用 translate0 方 法 移动 参照 点 坐标 的 位 置 。 
3) 缩放 


在 小 程序 中 可 以 使 用 scale0 方 法 对 图 形 进行 缩放 处 理 。 其 基本 格式 如 下 : 


Ctx-scale (xs vv) 


其 中 ,参数 x 表示 水 平方 同 X 轴 的 缠 放 倍数 ,参数 y 表示 垩 直方 同 Y 轴 的 缩放 倍数 ， 允 
许 寺 入 整数 或 疗 点 数 ， 但 必须 为 正 数 。 当 填 入 数值 1.0 时 为 正 第 显示 ， 无 缩放 效果 。 例 如 : 
tscale(t0.o, 过) 


上 述 代码 表示 宽度 缩小 为 原先 的 一 半 ， 高 度 放 大 为 原先 的 两 倍 。 对 一 个 宽 100 像素 、 局 
50 像素 的 窍 形 使 用 该 方法 表示 宽度 变 为 50 像素 ， 高 度 变 为 100 像素 。 


了。 微 信 小 程序 开发 零 基础 入 门 


4) 矩阵 变形 
在 小 程序 中 transform0 方 法 使 用 矩阵 多 次 壬 加 形成 更 复杂 的 变化 。 其 基本 格式 如 下 : 


ctx.transform(scaleXx, SkewX, SkewY, ScaleY, translatex, translateY) 


已 共有 6 个 参数 ， 均 为 Number 类 型 ， 具 体 襄 明 如 下 。 
e scaleX: 水 平 缩放 。 
e skewX: 水 平 倾 秆 :。 
。 skewY: 对 和 直 倾 科 .。 
e scaleY: 焉 百 缩放 。 
e translateX: 水 平移 动 。 
e translateY: 王 直 移动 。 
如 末 需 要 上 履 兰 原 允 的 窍 阵 变化 效 末 ， 可 以 使 用 setTransform0 方 法 ， 其 语法 格式 如 下 : 


ctx.setTransform(scalex, SkewX, SkewY, ScaleY, translatexX, translateY) 


其 参数 与 ransform0 的 参数 完全 相同 。 
【 例 11-23】 再 面 API 之 图 像 变 形 的 绽 合 应 用 
本 示例 将 展示 图 像 变 形 的 几 种 绘制 方式 ， 包 括 移 动 、 旋 转 、 缩 放 以 及 窍 
阵 变形 。 
视频 讲解 WXML (pages/demo07/transformy/transform.wxml) 文件 代码 如 下 : 


EAISSSETEEEIET /view 

- <View Cass= aemo 一 DoX > 

<view Class='title'> 图 像 变 形 </view> 

<canvas canvas-id='myCanvas'" style='border:lrpx solid'></canvas> 
<button type="primary" Size="mini" bindtap='translate'" > 移动 </button> 
<button type="'primary' SiZe="mini" bindtap"'rotate'> 旋 转 </button> 
<DbDutton type="pPrimary” Size= "mini" plIndtap= SCale- > 缩放 </button> 
<button type="pPrimary" SizZe="mini’ binqdtap='transftorm'> 赴 阵 变 形 </button> 
<button bindtap='drawBox'> 还 原 </button> 

0 .</view> 


WXSS (pages/demo07/transform/transform.wxss) 艾 件 代 人 如 下 : 


1 。 buttont 


ee margin: lO0rpx; 
| 
JS (pages/demo07/transformytransform.js〉 文件 代码 如 下 : 
1. Page l(t{ 
2. // 绘 制 基本 图 形 
3 引 . drawBox:functiont(})li 
44. let ctx=this .ctx 
es ctx.setF1illSsStyle(" lightoqgreen"') 
避 - ctx.fillRect{is, 195,150,1507 
We ctx.drawl) 
8 . 上 v 
9.  // 移 动 
lO0. translate: functiont() 1{ 
| this: ctx.translaterlis, 19) 
一 二 this.drawBoxt() 
13- 小 
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14. // 旋 转 


15. rotate: function() 1 


16. this.ctx.rotate (20*Math .PI/180) 
1 this.drawBoxt() 
8- Ts 


20。 scale: functiont() 1 
ead We this.ctx.scale (0 .02,0 .95) 
下 this.drawBoxt{) 


}, 
24. // 和 矩阵 变形 
25. transform: functiont{() { 
2. this.ctx.transform{(1.25, 20 + Math.PIl / 180,0 ,0-5 50， 50) 


wl this.drawBoxt() 

8. 上 

729. onLoad: function(options) 1{ 

30. this.ctx=wx.createCanvasContext ('myCanvas') /// 创 建 画 布 上 下 文 
31. this.drawBoxt() 

32. Ts 

33.1}) 


运行 效果 如 图 11-35 所 示 。 

【 代码 说 明 】 

本 示例 在 transform wxml 中 包含 了 4 个 <button> 迷 你 按钮 分 别 用 于 显示 图 形 的 移动 、 旋 
转 、 约 放 和 和 窍 阵 专 形 效 果 , 对 应 的 目 定 义 图 数 分 别 是 translateO0、rotateO、scaleO0 和 transform0(; 
还 包含 了 一 个 <button> 普 通 按钮 用 于 还 原初 始 图 形 ， 对 应 的 自 定义 函数 是 resetO0 。 在 
transform.js 中 首先 定义 drawBox0 方 法 用 于 绘制 基本 图 形 一 一 一 个 左上 角 在 (75,75)、 客 禹 
均 为 150 像 系 的 浅 绿 色 实 心 矩 形 ; 然后 定义 translateO 方 法 用 于 将 矩形 往 右 和 下 均 偏 移 75 像 
系 的 距离 ; 定义 rotate(O 方 法 用 于 将 算 形 诈 转 20°*; 定义 scale0 方 法 用 于 将 算 形 的 宽 和 局 均 更 


新 为 原来 的 一 半 ; 定义 transform() 方 法 将 距 形 的 宽大 更 新 为 原来 的 1.25 售 、 噩 度 更 新 为 原来 
的 一 半 ， 倾 斜 20° 且 往 右 和 下 均 偏 移 50 像素 的 距离 。 
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避 微 信 小 程序 开发 寺 基 础 入 | 避 微 信 小 程序 开发 堆 基 础 入 | ] 加币 信 小 程序 开发 零 基础 入 | ] 


(a) 页 面 初始 效果 (b) 移动 效果 (c) 旋转 效果 
图 11-35 ”图像 变 形 的 综合 应 用 
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还 原 还 原 还 原 


号 币 信 小 程序 开发 村 基础 入 | ] 号 微 信 小 程序 开发 零 基础 入 门 忆 微 信 小 程序 开发 零 基础 入 门 


(d) 缩放 效果 (e) 十 阵 变形 效果 (f) 还 原 急 始 效果 
图 11-35《〈 续 ) 


在 图 11-35 中 , 图 (a) 为 页 面 初始 效果 ; 图 (b) 一 〈e) 分 别 是 单 击 “ 移 动 ”“ 旋 转 ”“ 缩 
放 ” 和 “和 矩阵 变形 ”按钮 后 的 效果 ; 图 (f) 是 单 击 “ 还 原 ” 按 钮 后 的 效果 。 
图 像 的 剪裁 
在 小 程序 中 可 以 使 用 clip0 方 法 对 图 形 进行 剪裁 处 理 。 该 方法 一 旦 执行 , 前 面 的 绘制 图 形 
代码 将 起 到 剪裁 画布 的 作用 ， 超 过 该 图 形 所 覆盖 部 分 的 其 他 区 域 都 将 无 法 进行 绘制 。 
例如 : 
. / /创建 芒 裁 的 区 域 


= ER TE 0 1100 T1001 
. /7/ 覃 裁 国 布 


bt 


上 述 代 码 表 示 将 画布 剪裁 为 左上 角 在 原点 、 宽 和 高 均 为 100 像 系 的 矩形 。 蔓 裁 是 不 可 逆 
的 ， 下 一 次 使 用 clip0 方 法 也 只 能 在 当前 的 你 留 区 域 继续 进行 本 裁 。 
如 采 需 要 的 喜 裁 区 域 为 加 形 ， 可 以 使 用 ctx.arc0 方 法 。 例 如 : 


1 。 /7 开始 绘制 路 径 

2. Ctx.beginPpath(); 

3. // 创 建 圆 缴 六 裁 的 区 域 

4. ctx.arc{tl00, 100, 100, O00, Math .Pl + 2, truel; 
5 . // 可 裁 辆 布 

Ge CE] 本 (3 

7. // 结 束 路 径 绘制 

8. ctx.closePath(}; 


ee 上 述 代 码 表示 将 画布 剪裁 为 圆心 在 (100.100)、 半 径 为 100 像素 的 圆 形 。 
| 【 例 11-24】 表面 API 之 图 像 剪 裁 的 简单 应 用 
视频 讲解 WXML (pages/demo07/clipy/clhip.wxml) 文件 代码 如 下 : 


1 。 <view class='title'>7. 绘 图 </view> 
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2. <View Class="demo—box'> 

3. <view class='title'> 图 像 弛 裁 </view> 

A <Canvas canvas-id='myCanvas'" style='border:1lrpx solid'></canvas> 
he <button type="primary" bindtap="clip" > 开始 豫 裁 </button> 

6. <button bindtap='drawImage'> 还 原 </button> 

7. </view> 


JS (pages/demo07/clip/clip.js〉 文件 代码 如 下 : 


1. Page (l{ 


2. // 给 制图 像 


Se drawlImage: function() I 


4. let ctx=this.ctx 

5 ctx.drawImage ('/images/demo07/icon.jpg', S50O, 50) 
避 - Ctx.drawt)} 

7. 上 7 

8.  // 前 裁 

= clip: function(} 1 

10. let ctx=this .ctx 

有 ctx.savel{() 

a ctx.beginPath () 


1 ctx.arc(lo50, lo50, 100, O, 2 # Math .PI) 
14. Ctx-. clip() 
Lm ctx.drawImage ('/images/demo07/icon.jpg', S50, S50) 


16. ctx.drawt) 

es ctx.restorel) 

18. 上 

19. onLoad: function(options} { 

70. this.ctx—wx.createCanvasContext (myCanvas ' ) / /创建 画布 上 下 文 
.a this.drawlmage () 

22- } 

2 


运行 效果 如 图 11-36 所 示 。 
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(a) 页 面 初始 效果 (b) 前 裁 后 的 效果 
图 11-36 ”图 像 剪 裁 的 简单 应 用 
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【代码 说明 】 


本 示例 在 clip.wxml 中 包含 了 两 个 <button> 按 钮 分 别 用 于 可 裁 和 还 原 ， 对 应 的 目 定义 函数 
分 别 是 clip0 和 drawImage0。 在 clipjs 中 首先 定义 drawlImage0 方 法 用 于 绘制 一 个 微 信 图 标的 
系 材 (/images/demo07/icon.jpg)， 将 其 左上 和 角 绘制 到 画布 坐标 (50,50) 的 位 置 ， 然 后 定义 clip 


方法 0 将 画布 剪裁 为 圆心 在 (150,150)、 半 径 为 100 像素 的 圆 形 。 


在 图 11-36 中 ， 图 (a) 为 页 面 和 初始 效果 ; 图 (b) 为 王 裁 后 的 效果 ， 由 该 图 可 见 


形 的 图 片 被 剪裁 为 圆 形 。 
11.7.9 图 像 的 导出 


小 程序 使 用 wx.canvasToTempFilePath(OBJECT, this) 把 当前 画布 指定 区 域 的 内 容 导 出 生 


成 指定 大 小 的 图 乒 ， 并 返回 文件 路 径 。 其 参数 如 表 11-31 所 示 。 


表 11-31 wx.canvasToTempFilePath(OBJECT,this) 的 参数 


参数 最 低 版 本 


I 


x 画布 的 义 轴 起 点 (默认 为 0) 

y 画布 的 立轴 起 点 〈 默 认为 0) 

width 画布 宽度 默认 为 canvas 宽度 ) 

height 画布 高 度 〈 默 认为 canvas 高 度 ) 

destWidth 输出 图 片 宽度 (默认 为 width * 屏 幕 像素 密度 ) 
destHeight 输出 图 片 高 度 〈 默 认为 height * 屏 幕 像 素 密度 ) 
canvasId String 田 布 标识 ， 传 入 <canvas> 的 canvas-id 

fileType Stri 目标 文件 的 类 型 ， 只 支持 pg' 或 png'"， 默 认为 'png' 
图 片 的 质量 ， 取 值 范围 为 (0, 1]， 不 在 范围 内 时 当 


I 


。 


| 


| 


山 


quality Number 


successO 1 
failO Function | 否 


成 1.0 处 理 

接口 调用 成 功 的 回调 函数 

接口 调用 失败 的 回调 函数 

completeO) 接口 调用 结束 的 回调 函数 (调用 成 功 与 否 都 执行 ) 


着 | 世 | 巩 


0 


视频 讲解 


1. <view Glass=title'>7 全国 </view> 

2. <VIiIeEW Class=" demo box'> 

三 <wTENWUCTSSSETETETE 基 制 生 良 二 enw= 

4. <Canvas canvas—id='myCanvas'" style='horder:1rpx solid'></canvas> 
总 <button type="primary" bindtap="previewIlimage" > 预 完 图 片 </button> 

6. </view> 


JS (pages/demo07/preview/preview.jjs) 文件 代码 如 下 : 


- Page (i{ 
previewlmage:function()ti 
/ /保存 台布 内 容 到 临时 图 片 路 径 
wxX.cCcanvasToTempFilepPathl(t{ 
canvaslId: ‘myCanvas py 
success:function(res)l 


/ /图 片 的 路 径 地 址 


一 


1.2.0 
1.2.0 
1.2.0 
1.2.0 
1.2.0 
1.2.0 


1.7.0 


1.7.0 


在 自 定义 组 件 下 ， 第 二 个 参数 传 入 组 件 实例 this， 以 操作 组 件 内 的 
<canvas> 组 件 。 
Te 【 例 11-25】 界面 API 之 图 像 导 出 的 简单 应 用 
JP WXML (pages/demo07/preview/preview.wxml) 文件 代 伺 如 下 : 


原先 矩 


{YY 第 11 章 画面 AP| EEC 


var Src~res.tempFrFilePath; 


// 预 归 图 片 
有 := wxX.PpPreviewImage (| 
让 本 点 current: src， // 当 前 旺 示 图 片 的 http 链接 
下 2 | / /十 要 预 完 的 图 片 http 链接 列表 
I }) 
14: } 
I }) 
16> +} 


li. onLoad: function(options}) 1{ 


lo Const ctx~=~wx .createCanvasContext ("myCanvas'") 
20. / /绘制 矩形 

a ctx.setFillSsStyle(" lioghtqgreen’') 

Wa =ixe tliReet trio L030 

We ctx.drawt{) 

24-. } 

22.1) 


运行 效果 如 图 11-37 所 示 。 


WeChat 党 20-:30 1]O0% ml 


例题 DEMO “0 (©) 


第 11 章 界面 API 
7. 绘图 


绘制 线段 


局 微 信 小 程序 开发 鹤 基 础 入 | ] 


(a) 页 面 初始 效果 (Cb) 图 片 预览 效果 
图 11-37 图 像 导 出 的 简单 应 用 


【代码 说 明 】 
本 示例 在 preview wxml 中 包含 了 一 个 <button> 按 钮 用 于 预览 图 片 ， 对 应 的 自 定义 函数 是 
previewImage0。 在 previewjs 的 onLoad0 函 数 中 绘制 一 个 左上 角 坐 标 为 (75,75)、 宽 和 高 均 为 
150 像素 的 浅 绿色 实心 矩形 用 于 测试 图 片 导 出 效果 ， 在 previewImage0 方 法 中 首先 使 用 
wx.canvasToTempFilePath0 方 法 将 画布 内 容 保存 为 临时 图 片 文件 ,并 获得 文件 的 路 径 地 址 ; 然 


= 本 微 信 小 程序 开发 零 基础 入 门 志 j 


后 使 用 wx.prevlewJImage0 方 法 预 抠 图 片 。 


在 图 11-37 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 图 片 预览 效果 ， 由 该 图 可 见 画 布 已 


经 成 功 寻 出 成 图 片 。 


Do 11.8 下 拉 剧 新 


11.8.1 监听 下 拉 刷 新 


小 程序 在 Page0 中 定义 了 onPullDownRefreshO 图 数 用 于 监听 当前 页 面 的 用 户 下 拉 刷 新 


事件 。 


必 Lu ee 户 


onPullDownRefreshO 函 数 的 示例 代 介 如 下 : 


Bage li 
onPullDownRefresh: ftunction() { 
console.1log( "正在 下 拉 刷 新 ') 
} 


人 


测试 的 时 候 可 以 在 微 信 开发 者 工具 的 JSON 文件 中 进行 配置 ， 相 关 代 码 如 下 : 


{ 


"enablePullDownRefresh": true., 
} 


上 述 代码 可 以 放 在 appjson 文件 中 表示 所 有 页 面 都 允许 下 拉 刷 新 ， 也 可 以 单独 放 在 当前 


页 面 的 pagejson 文件 中 表示 只 有 该 页 面 允 许 下 拉 刷 新 。 
11.8.2 ”开始 下 拉 刷 新 


小 程序 使 用 wx.startPullDownRefresh(OBJECT) 触 受 下 拉 刷 新 劲 夯 ， 效 有 果 与 用 尸 手动 下 拉 


刷新 一 致 。 该 接口 从 基础 库 1.5.0 开始 支持 ， 低 版 本 需 做 羔 容 处 理 。 


其 OBJECT 参数 说 明 如 表 11-32 所 示 。 


表 11-32 ”wx.startPulIDownRefresh(OBJECT) 的 参数 


CE 说 有 


接口 调用 成 功 的 回调 函数 ， 返 回 String 类 型 参数 errMsg 表 
Function 


DY 


success() 


示 调 用 结 采 
fail0 否 接口 调用 失败 的 回调 函数 


ID 


completeO) 接口 调用 结束 的 回调 函数 (调用 成 功 与 耕 剖 执行 ) 
wx.startPullDownRefresh(OBJECT) 示 例 代 公 如 下 : 


wxX.StartPullDownRefresht(t 
success:function (res)t 
Console.l1og (res.errMsg) 


} 


- }) 
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11.8.3 停止 下 拉 刷 新 


小 程序 使 用 wx.stopPullDownRefreshO 俘 止 当 前 页 面 的 下 拉 刷 新 。 
wxX.stopPullDownRefreshO 示 例 代 码 如 下 : 


1. Page l(t{ 

ee onPullDownRefresh: function()i 
Ee wx.StopPullDownRefresh() 

2 } 

3. 1}) 


上 述 代码 表示 ， 当 onPullDownRefreshO 监 听 并 处 理 完 数据 后 可 以 使 用 该 接口 停止 Fu 
新 动作 。 

【 例 11-26】 表面 API 之 下 拉 刷 新 的 简单 应 用 

WXML (pages/demo08/pullDown/pullDown.wxml) 区 件 代 人 码 吉 下 : 


. <view Class='title'>8. 下 拉 刷 新 </view> 

. <VIEW Cass= aemo 一 boXx > 视频 讲解 
<view class='title'> 横 拟 下 拉 刷 新 </view> 

<button type='primary' bindtap-'startPullDown'> 开 始 下 拉 </button> 
<button type='primary' bindtap="'stopPullDown'> 售 止 下 拉 </button> 


. </view> 


i 


JS (pages/demo08/pullDown/pullDown.js〉 文 件 代 公 如 下 : 


. Page ltl{ 
/ /开始 下 拉 刷 新 
startPullDown:function()t{ 
wx.StartPullDownRefreshl(t 
SUCCeSS: function (res) | 
Console.1og (res.errMsg) 
} 
}) 
}, 
10. // 停 止 下 拉 刷 新 
11. stopPullDown: functiont(} 1 
| wxXx.sStopPullDownRefresh () 
13. |]} 
14.1}) 


该 示例 用 短信 开发 者 工具 看 不 出 下 拉 效 果 ， 因 此 使 用 真 机 测试 效果 。 

其 运行 效果 如 图 11-38 所 示 。 

【 代 公 膏 明 】 

本 示例 在 pullDown.wxml 中 包 舍 了 两 小 <button> 按 钮 分 别 用 于 开始 和 停止 下 拉 刷 新 动作 ， 
对 应 的 目 定 义 国 数 分 别 是 startPullDown0O 和 stopPullDownO 。 在 pulDown.ljs 中 定义 
startPullDownO 方法 调用 wx:startPulDownRefreshO 进行 目 动 下 拉 刷 新 动作 ; 定义 
stopPullDownO 方 法 调用 wx.stoptPullDownRefreshO 人 停止 下 拉 刷 新 动作 。 
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8. 下 拉 刷 新 


模拟 下 拉 刷 新 第 11 章 界面 API 


开始 下 拉 8. 下 拉 刷 新 


停止 下 拉 模拟 下 拉 刷 新 
@ 微 信 小 程序 开发 零 基础 入 门 开始 下 拉 


停止 下 拉 


@@ 微 信 小 程序 开发 零 基 础 入 门 


(a) 页 面 初始 效果 (b) 下 拉 状 态 
11-38 下 拉 刷 新 的 简单 应 用 
在 图 11-38 中 ， 图 (a) 为 页 面 初始 效果 ; 图 (b) 为 单 击 “ 开 始 下 拉 ” 按 钮 或 直接 手动 


下 拉 页 面 的 效果 ， 妆 前 由 于 没有 在 下 拉 后 进行 网 络 请 求 等 事务 处 理 动作 ， 所 以 会 在 较 短 时 间 
内 目 动 弹 回 。 开 发 者 可 以 根据 实际 需要 目 行 追加 数据 获取 等 功能 。 


综合 设计 应 用 实例 一 一 高 
小 程序 


新 闻 


在 学 习 了 小 程序 的 基础 知识 和 各 类 API 以 后 ， 不 芒 符 试 独立 动手 创建 一 个 完整 的 综合 
计 应 用 实例 。 解 如 何 仿 网 易 新 闻 小 程序 实现 一 个 简易 高 校 新 闻 小 程序 。 


se 综合 应 用 所 学 知识 创建 完整 新 闻 小 程序 项 目 : 
e 能 够 在 开发 过 程 中 熟练 掌握 真 机 预览 、 调 试 持 操作， 


本 项 目 一 共 需 要 3 个 页 面 ， 即 首页 、 新 闻 页 和 个 人 中 心 页 ， 其 中 首页 和 个 人 中 心 页 需要 


以 tabBar 的 形式 展示 ， 可 以 单 击 tab 图 标 互相 切换 。 
首页 的 功能 需求 
首页 的 功能 需求 如 下 : 
。 首 页 需要 包含 幻灯 片 播放 效 果 和 新 闻 列 表 ; 
。 幻 灯 片 至 少 要 有 3 幅 图 片 自动 播放 ; 
。 新 闻 列 表单 击 可 以 打开 阅读 新 闻 全 文 。 
新 闻 页 的 功能 需求 
新 闻 页 的 功能 需求 如 下 : 
。 阅读 新 闻 全 文 的 页 面 需要 显示 新 闻 标 题 、 图 片 、 内 容 和 日 期 ; 
。 人 允许 单 击 按钮 将 当前 阅读 的 新 闻 添 加 到 本 地 收藏 夹 中 ; 
。 己 经 收藏 过 的 新 闻 也 可 以 单 击 按钮 取消 收藏 。 
个 人 中 心 页 的 功能 需求 
个 人 中 心 页 的 功能 需求 如 下 : 
。 在 未 登录 状态 下 显示 登录 按钮 ， 用 户 单 击 后 可 以 显示 微 信 头 像 和 昵称 ; 
。 登 录 后 读 取 当前 用 户 的 收藏 夹 ， 展 示 收 藏 的 新 闻 列 表 ; 
。 收 藏 夹 中 的 新 闻 可 以 直接 单 击 查 看 内 容 ; 
。 在 未 登录 状态 下 收藏 夹 显示 为 空 。 
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12.2.1 项 目的 创建 
本 项 日 的 创建 选择 空 日 文件 夹 chapter12， 项 入 AppID 和 自 定义 项 目 名 称 如 图 12-1 所 示 。 


所 小 程序 项 目 管理 


小 程序 项 目 
编 相 、 调 坛 小 程序 
项 目 目录 


AppID wx19g07r9110a0f01e8a 
车 无 APpid 可 注册 或 体验 : 小 程序 / 小 游戏 


项 目 名 称 chnapter1 引 


人 


取消 色 碗 


建立 普通 快速 启动 模板 


12-1 ”小 程序 项 目 填 写 示 意图 


注意 请 取消 勾 选 “建立 普 退 快速 局 动 模板 ”选项 ， 以 免 目 动 生 成 代码 影响 手动 编写 。 
单 击 “ 确 定 ” 按 钮 后 ， 系 统 会 自动 生成 项 目 配 置 文件 project.config.json， 如 图 12-2 所 示 。 


a 


{} project.config.json 


图 12-2 目 动 生成 项 目 配 和 置 文件 project.config.json 
此 时 在 Console (控制 台 ) 有 报销 提示 ， 如 图 12-3 所 示 。 


[x Console Sources Network Secuyurity Audits Storage AppData Wxml Sensor Trace 


(Sy | top 9 Filer Default levels ™ 


Y sun Aug 26 2618 21:26:84 GMT+8888 (中 国标 准时 间 ) ”app.json 文件 读 取 错误 
| @ 未 找到 入 口 app.json 文件 ， 或 者 文件 读 取 失败 ， 请 检查 后 重新 编译 。 
> | 


图 12-3 未 找到 app.json 文件 报错 提示 
这 是 由 于 app.json 是 项 目的 入 口 文件 ， 下 一 市 将 介绍 如 何 手 动 创建 页 面 配 置 文 件 。 
12.2.2 ”文件 的 配置 


创建 应 用 文件 

应 用 文件 主要 有 app.json、app.js 和 app.wxss， 其 中 app.wxss 是 可 选 文 件 ， 用 于 存放 公共 
样式 。 这 3 个 文件 的 作用 域 是 整个 小 程序 项 目 。 

首先 进行 app.json 文件 的 创建 , 单 击 编辑 器 目录 结构 左上 角 的 + 号 按钮 , 在 下 拉 菜 单 中 选 


总 5 第 12 章 综合 设计 应 用 实例 一 高 校 新 闻 小 程序 _ 医 卫 


择 JSON 选项 新 建文 件 〈 如 图 12-4 所 示 )， 录 入 文件 名 然后 按 回 车 键 。 
在 app.json 文件 中 输入 一 对 器 符号 ， 然 后 按 Ctrl+S 快捷 键 进行 保存 ， 如 图 12-5 所 示 。 


一 < 


听 目录 
Page 


1 Component . 
apph.Json 


hs 1 和 


EN 


a 选择 JSON 文 件 


wss WXSS 


wxs WXS 


图 12-4 新建 JSON 文件 12-5 app.json 文件 的 初始 代码 


此 时 Console《〈 控 制 台 ) 仍 有 报错 ， 这 是 由 于 app.json 中 还 没有 进行 页 面 配置 。 暂 时 先 不 
和 党， 稍 后 创建 页 面 文件 时 系统 会 目 动 更 新 app.json 的 代码 。 
然后 用 同样 的 方法 新 建 app.js 和 app.-wxss 文件 ， 这 两 个 文件 傈 持 空 日 状态 关闭 即 可 。 全 
部 完成 后 的 目录 结构 如 图 12-6 所 示 。 
创建 页 面 文件 
在 应 用 文件 创建 完毕 后 需要 继续 创建 页 面 文件 ， 页 面 文件 一 般 来 说 会 统一 放 在 pages 文 
件 夹 中 ， 每 个 页 面 有 自己 独立 的 二 级 目录 ， 里 面包 含 wxml、wxss、js 和 json 几 个 同名 文件 。 
同样 单 击 左 上 和 角 的 + 写 按 钮 ， 选 择 “ 目 录 ” 选 项 新 建文 件 末 ， 命 名 为 pages， 然 后 按 回 车 
键 完成 创建 ， 如 图 12-7 所 示 。 
叫 目录 
,| Page 
,| Component 
SS 


人 {} JSON 


<> WXML 


S app-js 
{} app.json wss WXSS 
wxss aDDP.WXSS 
wxs VVXS 


{} project.config.json 


12-6 ”应 用 文件 创建 完成 12-7 新建 目录 文件 夹 


一 般 来 说 首页 默认 命名 为 ndex， 表 示 小 程序 运行 的 第 一 个 页 面 ; 其 他 页 面 的 名 称 可 以 
自 定义 。 本 项 目 有 3 个 页 面 文件 ， 需 要 创建 index (首页 )、my (个 人 中 心 页 ) 和 detail (新 
闻 页 )。 

自 先 需 要 在 pages 目录 内 部 创建 index 文件 光 ， 这 次 是 在 pages 目录 上 右 击 ， 和 选择“ 新 
建 ” 一 “目录 ”， 然 后 输入 index 名 称 ， 按 回 车 键 完成 创建 ， 如 图 12-8 所 示 。 

完成 后 的 目录 结构 如 图 12-9 所 示 。 
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T 名 


+ DO pagee 
apf ”硬盘 打开 
{} apf 乔 命 名 
ws apf 


{} pro ”期 除 


查找 


/ Page 
| Component 
新 建 二 级 目录 | 。。 

{ JSON 

<> WXML 

ws WASS 


Wis VS 


图 12-8 新 建 二 级 目录 


接着 右 击 index 目录， 选择“ 新建” 一 Page， 输 入 index 并 按 回 车 键 即 可 一 次 性 创建 完成 


十 以 


v |S pages 
pe [index 
JS app.js 
{} app.json 
wxss app.wWXSss 


{} project.config.json 


图 12-9 应 用 文件 创建 完成 


index 页 面 所 需 的 wxml、wxss、js 和 json 几 个 同名 文件 ， 如 图 12-10 所 示 。 


用 同样 的 方法 创建 my 和 detall 页 面 ， 全 部 完成 后 的 目录 结构 如 图 12-11 所 示 。 


+ Q 


” [SS pages 
bk OD index 
引 ”硬盘 打开 
{} af 
i 重 命名 
{} pr 删除 


"ee 


新 建 全 套 页 面 文件 | “5 。 


Component 


{} JSON 
<> WXML 


ms NASS 


we WXS 


图 12-10 ”新 建 全 套 页 面 文件 


和 


后 pages 
v [SS index 
I5 index.js 
{t} index.json 
<> INdex.wxml 
wxss INdex.Wxss 
TS my 


I5 my,js 


<> My.wxml 


wxss MY.WXSS 
JS app.js 
{} app.json 


wss app.Wxss 


{} project.config.json 


图 12-11 


此 时 app.json 会 自动 生成 页 面 配置 代码 ， 如 图 12-12 所 示 。 


app.json 


1 


2 
3 
| 
5 
6 


xX 


"pages": [ 
"pages/my/my" 
] 


12-12 app.json 目 动 生成 页 面 配 置 代码 


页 面 文件 创建 完成 
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创建 其 他 文件 

接 下 来 创建 其 他 目 定义 文件 ， 本 项 目 还 需要 以 下 两 个 文件 夹 。 

。 images: 用 于 存放 图 片 系 材 。 

e utils: 用 于 存放 公共 JS 文件 。 

文件 夹 的 名 称 由 开发 者 目 定 义 ， 创 建 方 式 与 pages 文件 夹 的 创建 方式 完全 相同 。 
1) 添加 图 片 文件 

本 项 目 将 在 tabBar 位 中 用 到 两 组 图 标 文件 ， 图 标 系 材 如 图 12-13 所 示 。 


LA AAA 


(a) index.png (b) index blue.pnsg 《c) my.png (d) my blue.png 
图 12-13 图标 素材 展示 
对 目录 结构 中 的 images 文件 认 右 击 ， 选 择 “ 使 盘 打 开 ”， 将 图 片 复制 粘贴 进去 。 
2) 创建 公共 JS 文件 
在 utils 文件 炎 上 右 击 ， 选 择 “ 新 建 ” 一 JS， 输 入 common 并 按 回 后 键 即 创建 公共 JS 文 
件 common.js， 如 图 12-14 所 示 。 
全 部 完成 后 的 目录 结构 如 图 12-15 所 示 。 


十 以 


™ [EE images 

回 index-png 

加 index blue.png 

回 mypng 

四 my _bluePng 
™ DD pages 
“ BS detail 

5 detall.js 

{1} detalljson 


EO = 


Page 


Component 
Js JS 
一 [} JSON 
新 建 JS 文 件 


< > WXML 


Ri WSS 


aiss app. WxSs 


Ws WXS 
1} projlect.config.json 


图 12-14 新 建 JS 文件 图 12-15 页面 六 件 创建 完成 
此 时 文件 配置 全 部 完成 ， 下 一 节 将 正式 进行 页 面 布 局 和 样式 设计 。 
12.2.3 ”视图 设计 


导航 栏 设 计 
小 程序 默认 导航 栏 是 黑 底 白字 的 效果 ， 用 户 可 以 通过 在 app.json 中 对 window 属性 进行 
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重新 配置 来 目 定义 导航 栏 效 末 。 更 新 后 的 app.json 文件 代码 如 下 : 


LE 

2 

3 "window™: 1 

4. "navigationBarBackgroundColor™": "#328eeb", 
ee "navigationBarTitleText™: "我 的 新 闻 了 网 "， 

2 "navigationBarTextStyle”™: "white”™ 

J } 

8. 1 


上 述 代 码 可 以 更 改 导 航 栏 背 景色 为 蓝 色 、 字 体 为 白色 ， 效 果 如 图 12-16 所 示 。 


sesse WeChat 全 


12-16 目 定 义 守 航 栏 效果 


tabBar 设计 
首先 在 app.json 中 追加 tarBar 的 相关 属性 代码 ， 更 新 后 的 appjjson 文件 代码 如 下 : 


1 1 

2- Pages: |=|s 

也 “window”: {..}, 

i "tabpBar™: { 

sh "color™: "#000", 

6. "selectedColor™: "#328eeb", 

lis “st 

De { 

号 < "pagePath": "Pages/inadex/AinadeXx"， 
10. "iconPath": "images/index.png", 
| "selectedIlIconpPath™: "images/index blue.png™", 
下 二 me 

13. }， 

14. 

Fh "pagePath": "pages/my/my", 

16. "IConPath" : "images/my.png™", 

| "selectedIconPath™": "images/my blue.png™ 
Ue a 

1 } 

20. ] 

1. 中 

al 


运行 效果 如 图 12-17 所 示 ， 此 时 已 经 可 以 切换 首页 和 个 人 中 心 页 了 。 


图 12-17 tabBar 完成 效果 图 


页 面 设计 

1) 首页 设计 

首页 主要 包含 两 部 分 内 容 ， 即 幻灯 片 滚动 效果 部 分 和 新 闻 列 表 ， 页 面 设计 图 如 图 12-18 
所 示 。 


JT 


上 才情 性 
On 
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pp WeChat 全 


约 灯 搬 深 动 效 未 部 分 


新 闻 列 表 


EE 
12-18 ”首页 设计 图 


计划 使 用 的 组 件 如 下 。 

。 么 ] 灯 片 深 动 效 果 部 分 : <swiper> 组 件 。 

。 新闻 列表 : <view> 容 右 ， 内 部 使 用 数组 循环 。 
WXMI (pages/index/index.wxml) 代码 如 下 : 


.<1-- 约 灯 片 滚动 --> 


- <SwWiper lndicator—dots="true” autoplay="true” interval="o000"™ durat1lIon 王 200 > 


</swiper> 


| 


。<View id='news-list'>3 这 是 新 闻 列 表 < /view> 


接着 为 组 件 添加 wx:for 属性 循环 显示 幻灯 片 内 容 和 新 闻 列 表 数 据 。 
修改 后 的 WXML (pages/index/index.wxml) 代码 如 下 : 


A 


- <SWiper lndicator—dots="true"” autoplavy="true™” jinterval="o000"™ duration=" 500 > 


<block wx:for="{{swiperIimg}}™ wx:key="swiper{{index}}'> 
<SWiper— item> 
<image src="{{item.src}}" class="slide-image™ /> 
</swiper—item> 
</block> 


. </swiper> 


<1-- 新 闻 列 表 --> 


.<VIiew lid='news—l11ist'»> 


<View Class="1ist item’' wx:ITor="{{newsListl}}™” wx:fior—item="nNnews"” wxX:key= 
“"“{{news.1d}}"> 

<image src='{{news.poster}}'></image> 

<text class='news-title' > {{news.title}l}— {{news.add date}}</text> 
</view> 


</viewy> 
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相关 WXSS (pages/index/index.wxss) 代码 片段 如 下 : 


1. /*swiper 区 域 样式 */ 

2。 /+#1-1 swiper 组 件 #/ 

3s SWIiper | 

4. height: 400rpx; 

2. 1} 

6. /*1-2 swiper 中 的 图 片 */ 
1. swiper image { 

8. width: 1l100%; 

= height: 100%; 

工人 < 

11 ./* 新 闻 列 表 区 域 样式 */ 
12.V*#2-1 新 闻 列 表 容 器 */ 
13.#news—list 1{ 

14. min—height: 600rpx; 
15-. padding: Torpxs 
16.} 

17.V*2-2 列表 项 目 */ 
18..11st- iteml{ 

19 displav* Tlexys 


20。. flex direction: IOws 
21. border-—bottom: lrpx Solid gray; 
22-] 


23./*2-3 新 闻 图 片 */ 
-4..1ist— item imadgel 
29. Width:230rpx; 
26. height: lo0rpxs 
21. margiin: lO0Orpxs 

二 下 二 

29./*2-4 新 闻 标 题 */ 

30. .news—titlel 

31. width: 100%: 

32. ‘displav: block;s 
33- Jine—height: 6b60rpxs 
34. font—size: UP; 
Sl 


为 了 进行 布局 和 样式 效 末 的 预 砚 ， 还 再 要 在 JS 文件 的 data 中 临时 录入 几 个 测试 数据 。 
相关 JS (pages/index/index.js) 代 但 片段 如 下 : 
1- Page (li 


te data: I 


a // 人 J 灯 片 又 材 


4. SwWwiperImg: | 

-a { src: 'http://www.ahnu.edu.cn/uploads/20180305/20180305]130736 25127.jpg" }， 
56. { src: http://www.ahnu.edu.cn/uploads/20181114/20181114030202 43004.png"'}, 
J { src: 'http://www.ahnu.edu.cn/uploads/20181127/20181127061319 394716.png'} 
3 ] ， 


9 . / /临时 新 闻 数 据 


10. newsList:|t{ 


11. id: T064698", 

下 title: ' 俄 罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 觉 委 书 记 顾 家 山 一 行 并 接受 《 力 内 译文 全 集 》 赠 也"， 
13. poster: 'http://www.ahnu.edu.cn/uploads/20180305/20180305130736 25127 .jpg", 
14. add date: “2018-03-02" 

Le 加 

16.  】} 


171-1 
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当前 效果 如 图 12-19 所 示 。 

由 图 12-19 可 见 ， 此 时 可 以 显示 约 灯 片 播放 和 一 条 临时 新 闻 。 由 于 尚未 获得 新 闻 数 据 ， 
所 以 和 暂时 无 法 显示 完整 新 闻 列 表 ， 仅 供 样 式 参考 。 

2) 新 闻 页 设计 

新 闻 页 是 用 于 给 用 户 浏览 新 闻 全 文 的 ， 需 要 用 户 单 击 首页 的 新 闻 列 表 ， 然 后 在 新 窗口 中 
打开 该 页 面 。 新 闻 页 包括 新 闻 标 题 、 新 闻 图 片 、 新 闻 正 文 和 新 闻 日 期 ， 页 面 设计 如 图 12-20 
所 示 。 


新 闻 标 题 


新 闻 图 所 
由“ 俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 委 书 


记 顾 家 山 一 行 并 接受 《 力 网 译文 全 集 } 风 予 
一 一 2018-03-05 


新 闻 止 文 


新 闻 日 期 


图 12-19 首页 效果 图 12-20 ”新闻 页 设计 图 


由 于 和 暂时 没有 做 单 击 跳 转 的 逻辑 设计 ， 所 以 可 以 临时 修改 app.json 文件 的 pages 属性 中 
的 页 面 路 径 顺 序 ， 将 detail 页 面 路 径 移动 到 第 1 行 ， 代 码 如 下 : 


| 
党 汪 "pages": | 
"pages/detail/detail"., 
-8 "pages/index/index"™, 
- "pages/my/my" 
6. ]， 
Ds 本 
8. 1 
此 时 预 谢 融 可 以 直接 显示 detail 页面 了 。 后 面 每 一 页 的 设计 部 可 以 这 么 做 ， 设 计 完 于 后 


册 改 回 显示 首页 即 可 。 
计划 使 用 <view> 组 件 进 行 整 体 布 局 ， 目 定义 class 名 称 如 下 。 
e container: 整体 容器 。 
e title: 新 闻 标 题 区 域 。 
。 poster: 新 闻 图 片区 域 。 
e content: 新闻 正文 区 域 。 
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i 


e add date: 新 闻 日 期 区 域 。 
WXMIL (pages/detall/detallwxml) 代码 如 下 : 


- <VIiew Class='container'y> 


<VvView Class='title' [1article.titlell</Yview> 
<View Class='poster'> 
<image src="'{{article.poster}}" mode='widthFix'></image> 
</view> 
<View Class='content'>{{article.content}}</view> 
<Vl1ewWw class='add date'> 时 间 : {{article.adqd date}}</view> 


. </view> 


WXSS (pages/detail/detail.wxss) 代码 如 下 : 


一 条 测试 数据 。 


1 . /* 整 体 容 右 */ 

7. -Containert 

人 padding: lo5rpx; 

和 4. emnkE Lngqn CembEery 

I 

6. /* 新 闻 标 题 */ 

| 

font—size: 1l4pt; 

人 line—height: 80rpx; 

工人 < 

11./* 新 闻 图 片 #/ 

12..poster imagel{ 

13. width: 100%; 

1]14.} 

15./* 新 闻 正 文 */ 

16. .contLentl 

Li EemE=alan: Tetes 

18. font—size: l2pts 

19. Tine henghti: 60rpxs 

20 .1 

21 ./* 新 闻 日 期 */ 

22..add datel 

23. font—size: la2pts 

24. Text-=-align: TIights 

295. Jine—height: 30rpx; 

26 margin—right: 2o0rpx; 

21 margin—top: 20rpxs 

a 
为 了 进行 布局 和 样式 效果 的 预览 ， 还 需要 在 JS 文件 的 data 中 临时 录入 
JS (pages/detaildetailjs) 代码 请 段 如 下 : 

1. Page l(t{ 

之 。 data: 1 

Ye article:1{ 

4. i1d: 20640698", 

5. title: ' 俄 罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 芝 委 书记 顾家 山 一 行 并 接受 《 力 站 译文 全 集 》 赠 子 '， 

6. poster: "http://www.ahnu.edu.cn/uploads/20180305/20180305130736 25127.jpg", 

7 content: ! 本 网 讯 〈 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 杰 尼 索 夫 在 北京 俄罗斯 驻 


华 大 使 僻 会 见 了 校 特 委 书 记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 的 十 套 《 力 冈 译 文 全 集 》。 俄 
罗斯 驻 华 大 使 馆 参 赞 梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 蕊 尔 、 大 使 助理 、 塔 斯 社 记者 ， 我 校 校 办 主任 甸 歼 明 、 
出 版 社 社 长 张 奇 才 ， 我 校 杰出 校友 、 俄 罗斯 人 民 友 谊 勋章 和 利 哈 乔 夫 院 士 奖 著 得 者 、 中 国 俄罗斯 文学 研 
完 会 会 长 刘 文 飞 教授 等 参加 了 会 见 。 ，'， 


和 
2 


add date: "2018-03-02" 
} 
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当前 效果 如 图 12-21 所 示 。 

由 图 12-21 可 见 ， 此 时 可 以 有 显示 完整 样式 效果 。 由 于 尚未 获得 新 闻 数 据 ， 所 以 暂时 无 法 
根据 用 刀 早 击 的 新 闻 标 题 入 口 闭 示 对 应 的 新 闻 内 容 ， 仅 供 样 式 参考 。 

3) 个 人 中 心 页 设计 

个 人 中 心中 主要 包含 两 个 版 块 ， 即 登录 田 板 和 我 的 收藏 。 登 录 田 板 用 于 显示 用 户 的 微 信 
头像 和 昵称 ,，“ 我 的 收藏 ”用 于 显示 收藏 在 本 地 的 新 闻 列 表 。 页 面 设计 如 图 12-22 所 示 。 


重重 重重 别 NE 人 hat 3 [TTTT EL 


俄罗斯 联邦 驻 华 大 使 杰 尼 府 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 风 译文 全 集 》 赠 予 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 
杰 尼 索 夫 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 
记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 《 力 网 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 参 链 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 蕊 尔 、 大 使 助理 、 塔 斯 我 的 收藏 
社 记者 ， 我 校 校 办 主任 曾 歼 明 、 出 版 社 社 长 张 奇 
才 ,我 校 杰出 校友 、 俄 罗斯 人 民 友谊 勋章 和 利 哈 乔 
夫 院 士 奖 获得 者 、 中 国 俄罗斯 文学 研究 会 会 长 刘 文 
飞 教授 等 参加 了 会 见 。 

时 间 : 2018-03-05 


Es 


图 12-21 新 闻 页 效果 图 图 12-22 个 人 中 心 页 设计 图 


计划 使 用 <view> 组 件 进 行 整 体 布局 ， 目 定义 id 名 称 如 下 。 
。myLogin: 登录 面板 。 

e mylcon: 做 信 头 像 图 片 。 

nickName: 做 信 了 昵称 。 

e myFavorites: 我 的 收藏 。 

WXML (pages/my/my.wxml) 代码 如 下 : 


I 
. <View id="'myLogin’'> </view> 


.<1!-- 我 的 收藏 --> 


- <View idqd='myEavorites'> </view> 


户 [oo 请 


接 看 为 这 两 个 区 域 瀛 加 内 容 ， 修 改 后 的 WXML (pages/my/mywxml) 代码 如 下 : 
.<1-- 登 录 面 板 --> 


-<VlIeW ld="'myLogin'> 
<block> 
<image id='myIcon'" src='{{src}}'></image> 
<text id="'nickName'>{{nickNamel}l }</text> 
/block> 
. </view> 


下 
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8 .<!-- 我 的 收藏 --> 

9. <view id="'myFavorites'> 
10. <text> 我 的 收藏 (1) </text> 
11. <!-- 收 藏 的 新 闻 列 表 --> 


12. <View lid='news—l11ist"> 

| Re 8 <ViewcCclass="1ist item" wx:for="{ {newsList}} wx:for item"nNnews" wx: key= 
“"“{{news.1dili}"> 

jj 本 <image src='{{news.poster}}'></image> 

a <text class="'news title'>Y iiInews.title}l}—— {{news.add datel}</text> 

16. </view> 


17. </view> 
18.</viewy> 


WXSS (pages/my/my.wxss) 代码 如 下 : 


1 . /+ 登录 面板 */ 

2. #myLogint{ 

Ee background—color: #328eeb; 
4. height: 400rpx; 

pe displavy: Tlexs 


Ge flex—direction: columns 

A ajigqgn—items: centers 

中 二 Justify—content: space—around; 
> 


10./*1-1 头像 图 片 */ 
11.#myIcont 

12. width: 200rpx; 

13. height: 200rpxs 

14. border—Tadius: J0%s 
下 

16./*1-2 微 信 了 昵称 *y7 


17.#nickName { 


18. color: whites; 
| 
20./* 我 的 收藏 */ 


21.#myFavoritest! 
22. Padding: 20rpxs 
23.1 


由 于 新 闻 列 表 的 样式 与 自 页 的 完全 相同 ， 没 有 必要 曹 复 梓 式 代码 造成 几 余 ， 可 以 将 
index.wxss 中 新 闻 列 表 样 式 的 相关 代码 挪 到 app.wxss 中 使 用 。 
app.wxss 的 代码 如 下 : 


1 。 /* 新 闻 列 表 区 域 样式 */ 

2 . /*2-1 新 闻 列 表 容 器 */ 

3. #news—list f 

和 4. min—height: 600rpx; 
2 Padding: lorpx; 

oe. } 

7. /*2-2 列表 项 目 */ 

3838. .1ist— -iteml 

> 网 displav: Tlex; 


10. flex—direction: row; 
11.。 border-bottom: lrpx Solid gray? 
1l2.1 


13./*2-3 新 闻 图 片 */ 
14..1ist -item imagetl 
1o. width:230rpxs 
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16. height: lo0rpxs 

1i. margin: lO0Orpx; 

18.} 

19./*2-4 新 闻 标 题 */ 

“0U- .news—titlel 

21. width: 100%; 

2。 displav: block; 

23. line~height: 60rpx; 
过 本 “Fonte silizes LO0pEs 
en 


为 了 进行 布局 和 样式 效 来 的 预 宽 ， 人 还 需要 在 JS 文件 的 data 中 临时 录入 测试 数据 。 
JS (pages/my/my.jjs) 代码 请 段 如 下 : 


1. Page ({ 

二 data: I 

3 / /临时 微 信 用 户 昵 称 和 头像 

9 nickName: ' 未 登录 ' 

二 src:'/images/index.png', 

6 / /临时 收藏 夹 新 闻 数 据 

1 newsList: [tf 

号 1d: “64659868 ， 

9 . title: "俄罗斯 联 邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 委 书记 顾家 山 一 行 并 接受 《 力 囚 译文 全 集 》 赠 予 '， 
10. poster: "http://www.ahnu.edu.cn/uploads/20180305/20180305130736 25127.jpg"', 
11. add date: “2018—03- 03" 

1z. rol 

| 

14.}) 


我 的 收藏 (1) 
“和 。 作 罗 斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 


委 书 记 顾 家 山 一 行 并 接受 《 力 网 译 妇 全 
华 》 赠 予 一 一 2018-03-05 


由 图 12-23 可 见 ， 此 时 可 以 显示 完整 样式 效果 。 由 于 尚未 获得 微 信和 用户 数据 和 收藏 在 本 
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地 的 缓存 数据 ， 所 以 暂时 无 法 显示 实际 内 容 ， 仅 供 样 式 参考 。 
此 时 页 面 布 局 与 样式 设计 已 经 完成 ，12.2.4 节 将 介绍 如 何 进行 逻辑 处 理 。 


12.2.4” 远 杜 实现 


公共 逻辑 

正常 来 说 数据 应 该 由 网 站 群 管理 平台 提供 新 闻 接 口 ， 由 于 隐私 安全 、 开 发 者 条 件 限 制 等 
一 系列 问题 ， 这 里 采用 模拟 数据 进行 代 蔡 。 有 条 件 的 开发 者 可 以 使 用 第 三 方 免费 或 付费 新 闻 
接口 〈 例 如 聚合 数据 等 )， 或 自行 搭建 服务 器 提供 接口 。 

假设 已 经 获取 到 了 数据 ， 将 其 放 在 公共 JS 文件 (utilycommonjs) 中 ， 代 码 片段 如 下 ; 


1 。 const news=|[1 

一 证 id: 26646958 ， 

3. title: "俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 膏 委 书 记 顾 家 山 一 行 并 接受 《 力 冈 译文 全 集 》 赠 予 '， 

4 poster: 'http://www.ahnu.edu.cn/uploads/20180305/20180305130736 25127.jpg", 
5. content: ' 本 网 讯 〈 校 出 版 社 ) 3 月 2 日 上 午 ,， 俄罗斯 驻 华 大 使 杰 尼 索 夫 在 北京 俄罗斯 驻 华 大 
使 馆 会 见 了 校 党 委 书记 顾家 山 ， 并 接受 了 我 校 出 版 社 赠 子 俄罗斯 大 使 馆 的 十 套 《 力 四 译文 全 集 》。 俄 罗斯 
驻 华 大 使 馆 参 赞 梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 苹 尔 、 大 使 助理 、 塔 斯 社 记者 ， 我 校 校 办 主任 曾 歼 明 、 出 版 
社 社 长 张 奇 才 ， 我 校 杰出 校友 、 俄 罗斯 人 民 友 诠 勋 草 和 利 哈 乔 夫 阮 士 奖 获得 痢 、 中 国 俄罗斯 文学 研究 会 
会 长 刘 文 飞 教授 等 参加 了 了 会见。 '， 

6. add dates= “2018 03 03° 

了 - 1}, 

8. { 

号 id: "T304083", 

10. title: "我 以 学 子 代 表 国 家 队 获 中 国 羽 毛 球 公开 赛 男 双 亚 盏 '"， 

11. poster: 'http://www.ahnu.edu.cn/uploads/20181114/20181114090202 43004.png', 

12. content: ， 本 网 讯 (体育 学 院 徐 梦 涛 ) 11 月 11 日 ， 世 界 羽 联 中 国 羽 毛 球 公开 才 在 福州 落下 
帷 磊 。 在 男子 双打 半 决 赛 中 ， 我 校 2018 级 运动 训练 专业 学 生 谭 强 与 搭档 何 济 霆 以 2 : 0 战胜 印尼 组 合 瑞 
哈 末 。 阿 山 / 亭 德 拉 ， 晋 级 决赛 。 决 赛 中 ， 这 对 年 轻 组 合 以 1 : 2 负 于 现世 界 排名 第 一 的 印尼 组 合 ， 获 得 
了 本 次 比赛 的 亚 车 。 这 也 是 谭 强 在 本 年 度 内 获得 的 最 好 成 绩 。 ，' 

13 addy dates 2018 S11 14" 

14.}, 

| 

下 和 

17. title: ' 我 校 学 子 在 全 省 第 八 届 少 数 民族 传统 体育 运动 会 上 吾 获 佳绩 '， 

18. poster: "http://ww.ahno.edu.cn/uploads/20181127/20181127061319 94716.png", 
19. content: ' 本 网 讯 ( 体 育 学 院 爷 华 刚 》11 月 18 日 至 23 日 ， 由 安徽 省 人 民政 府 主 办 ， 省 民 委 、 
省 体育 局 和 蚌 塌 市 人 民政 府 承 办 的 安徽 省 第 八 届 少数 民族 传统 体育 运动 会 在 蚌 塌 市 成 功 举行 , 全 省 16 个 
地 市 代表 团 近 1300 名 运动 员 、 教 练 员 、 裁 判 员 参加 了 本 次 运动 会 。\n 本 届 运 动 会 共 设 武术 、 民 族 式 摔 
跷 、 条 球 、 跃 球 、 押 加 、 局 脚 竞 速 、 陀 时 和 板 畦 竞 速 等 8 个 项 目 。 我 校 组 建 了 由 周 若 雅 、 王 和 章 、 王 踢 
等 23 名 少数 民族 学 生 组 成 的 运动 员 队 伍 ， 代 表 无 湖 市 参加 了 局 脚 竞 速 、 耻 术 、 趴 球 、 了 螺 和 板鞋 竞 速 等 
5 个 大 项 的 比赛 。 经 过 激烈 角逐 ， 我 校 运 动 健儿 共 获 得 4 个 一 等 奖 (第 1 名)，6 个 二 等 奖 (第 2-4 名 )， 
9 个 三 等 奖 (第 5-8 名 ) 的 优 和 寞 战绩 ， 出 色 地 完成 了 比赛 任务 。 ' 

2 avild dates “S208 TL 2 

-| .|} 

2.1; 


这 里 用 了 3 条 新 闻 记 录 作 为 示范 ， 开 有 友 者 可 以 目 行 添 加 或 修改 新 闻 内 容 。 
接 下 来 在 common.js 中 添加 目 定 义 图 数 getNewsList0 和 getNewsDetail0， 分 别 用 于 获取 
新 闻 列 表 信 息 和 指定 id 的 新 闻 正 文 内 容 ， 代 码 片 段 如 下 : 
1 . // 著 取 新 闻 列 表 
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2. function getNewsList() I{ 

3 let list=[]; 

4 for {var 1i=0; i<news.length; I++) 1{ 
Se let ob]j={}; 

6 ob] .1d=news|[i|.1id; 

OD] .poster~—~news|[1il] .poster:; 

8 ob]j.add date~news|li] .add date; 


有 ob]j .title=news [1i|] .title; 

10. 1ist.push (ob > 

Js 

1 /7 返回 新 闻 列 表 
13=53 

14. 

15.// 获 取 新 闻 内 容 


le.function getNewsDetail (newSID) 1{ 
li. let msg=| 


18. code: '4041, / /没有 对 应 的 新 闻 
| news: 1{} 
0 }s 


21. for {var 1i=0; i<news. length; 1++) 1{ 
a i (newsID==news[i].idy f /7 匹配 新 闻 id 编号 


2 msg.code="200°"; /1 成 功 

24. msg.news=news [ 工 ] ; / /更 新 当前 新 闻 内 容 
Wa break; 

之 人 - } 

er wl 

2 returr ms5: // 返 回答 找 绪 果 

全 各 二 下 


最 后 需要 在 common.js 中 使 用 module.exports 语句 暴露 图 数 出 口 ， 代 码 片 段 如 下 : 


- moOodule -exports=1{ 
getNewsList: getNewsList, 
getNewsDetail: getNewsDetalil 
} 


户 To 请 


全 此 完成 了 公共 逻辑 处 理 的 部 分 。 
然后 在 各 外 和 外 JS 文件 项 病 引 用 公共 极 文件 ， 引 用 代码 如 下 : 


var common-require('../../utils/common.js') // 引 用 公共 Js 文件 


注意 这 里 暂时 还 不 支持 绝对 路 径 的 引用 ， 只 能 使 用 相对 路 径 。 

首页 逻辑 

首页 主要 有 两 个 功能 需要 实现 ， 一 是 展示 新 闻 列 表 ， 二 是 单 击 新 闻 标 题 可 以 跳 转 对 应 的 
内 容 页 面 进 行 浏览 。 

1) 新 闻 列 表 展 示 

新 闻 列 表 展 示 使 用 了 {{newsList}}， 因 此 需要 在 页 面 JS 文件 的 onLoad0 函 数 中 获取 新 闻 
列表 ， 并 更 新 到 data 属性 的 newsList 参数 中 。 

关 JS (pages/index/index.js) 代码 片段 如 下 : 
| 


ee onLoad: function(options) I{ 


3. /7 获取 新 闻 列 表 
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3 let list= common .getNewsL1ist() 
5. / /时 新 列表 数据 

6. this.setData({newsList:11st}) 
1. } 

8. 上 


此 时 页 面 效 果 如 图 12-24 所 示 。 


+ 六 轩 斯 联 朱 驻 侍 大 使 本 尼 案 夫 会 出 术 蝎 笑 书 
记 跨 家 山 一 行 并 姥 受 《 力 由 译文 全 集 》 赠 子 


———2018-04-05 


以 学 子 尼 于 国家 有 队 蕊 中国 蚀 毛 三 公开 赛 胃 


观 亚军 一 一 2018-11-14 


。 我 校 学 子 在 全 首 篇 八 忆 少数 民族 伟 艇 体育 运 


宇 且 者 别 sa 和光 
对 1“ 动 会 上 宫 芍 佳 丢 一 一 2018-11-27 


图 12-24 首页 新 闻 列 表 展 示 


2) 音 击 跳 转 新 闻 内 容 
右 布 望 用 户 单 击 新 闻 标 题 即 可 实现 跳 转 ， 需 要 多 为 新 闻 列 表 项 目 谎 加 单 击 事件 。 
相关 WXML (pages/index/index.wxml) 代码 片段 修改 如 下 : 

1 . <!1-- 新 闻 列 表 --> 


2. <VIiew 19q= news 一 1Ss 七 > 


3. <V1IeW Class="1ist- item' wx:for="{{newsList}}™” wx:for-item—"nNnews" wxXx:key= 
“"“{{news.1idl}t}"> 
4. <image src='{{news.poster}}'></image> 
i <text class=" news—title” bindtap="goToDetail' data—id="'{{news.id}}'>O 
{{news .title}}—{{news.adqd date}}</text> 


6. </view> 
7. </view> 


具体 修改 为 第 5 行 加 粗 字体 部 分 ， 为 <text> 组 件 添 加 目 定 义 触摸 事件 函数 goToDetail0， 


并 且 使 用 data-id 属性 携带 了 新 闻 id 编号 。 
然后 在 对 应 的 detailjs 文件 中 添加 goToDetail0 函 数 的 内 容 ， 代 码 片段 如 下 ; 


Page ({ 
1 本 本 
* 目 定 义 函数 一 一 跳 转 新 页 和 面 浏览 新 闻 内 容 
a 


goToDetail: functiont(e)} I{ 
/ /获取 携带 的 data-iq 数据 


let id=e.currentTarget .dataset .id; 


下 
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8. / /携带 新 闻 id 进行 页 面 跳 转 


之 wx.navigateTol(l! 

10. url: '../detail/detail?id="'+id 
11. }) 

12. |} 

13。51} 


此 时 已 经 可 以 单 击 跳 转 到 detail 页 面 ， 并 且 成 功 携 市 了 新 闻 id 数据 ， 但 是 仍 需 在 detail 
页 面 进行 携 市 数据 的 接受 处 理 方 可 显示 正确 的 新 闻 内 容 。 

新 司 页 多 辑 

新 闻 页 主要 有 两 个 功能 需要 实现 ， 一 是 显示 对 应 新 闻 ， 二 是 添加 /取消 新 闻 收 藏 。 

1) 显示 对 应 新 闻 

在 首页 过 和 辑 中 已 经 实现 了 页 面 跳 技 并 携 市 了 新 
写 ， 并 得 艾 对 应 的 新 闻 内 容 。 

相关 JS (pages/detail/detailLjs) 代码 片段 如 下 : 


和 id 编 亏 ， 现 在 南 要 在 新 闻 页 接收 id 编 


1. Page (1{ 

2 onLoad: function(options) I 

let id=options.id; /7 获取 页 面 跳 转 来 时 携 市 的 新 闻 id 编号 
el let result=common .getNewsDetail (id) 

5. / /获取 到 新 闻 内 容 

6. 1f (result .codeQ—— "200"7}1 

让 七 h1LS - SetData ({artIcle:reSsSUlLtL .newS 上 上) 

8 } 

3. } 

10.1}) 


此 时 曹 新 从 站 页 单 击 新 闻 跳 转 束 可 以 友 现 已 经 能 够 正确 显示 标题 对 应 的 新 闻 内 容 了。 
运行 效 末 如 图 12-25 所 示 。 


重重 重重 二 VE hat 


俄 办 斯 联邦 驻 华 大 使 杰 居 京 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 网 译 广 全集》 赠 予 


“ 依 寺 煌 联 邯 驻 华 大 使 本 尼 守 夫 会 风 悦 党委 书 


IC 有 守山 一 行 开 榜 时 《 力 国 评 文 全 和 集 》 轩 于 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 帕 罗斯 驻 华 大 使 


人 赤 尼 京 去 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 


记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 《 力 浆 译 区 全集》 。 俄 罗斯 驻 华 大 使 馆 参 赞 
梅 利 尼 科 娃 、 大 使 馆 一 秘 仇 巷 尔 、 大 使 助理 、 塔 斯 
杜 记者 ， 我 校 校 办 主任 曾 冤 明 、 出 版 社 社 长 张 奇 
才 ， 我 校 杰出 校友 、 俄 罗斯 人 民 友 谊 勋章 和 利 哈 乔 
去 院士 奖 获得 者 、 中 国 俄罗斯 女 学 研究 会 会 长 刘 文 
飞 教 授 等 参加 了 会 见 。 


李子 化 守 国标 队 著 中国 六 关 各 公 于 要 轴 


一 201 和 -11-]4 


; < 全 池子 在 全 省 入 人 狼 导 少数 民族 伟 钳 体育 过 
于 于 面 自 ”= 本 和 


, 冲 动 安 上 言 节 佳 洁 a0l8-11-2/ 


上 时间 ; 2018-03-05 


Ca) 首页 新 闻 列 表 Cb) 浏览 收藏 的 新 闻 
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图 12-25 在 首页 列表 中 浏览 新 疗效 果 
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2) 添加 /取消 新 闻 收 藏 

修改 detailwxml 人 代码， 追加 两 个 <button> 组 件 作 为 添加 /取消 收藏 新 闻 的 按钮 ， 并 使 用 
wx:1f 和 wx:else 属性 使 其 每 次 只 存在 一 个 。 

WXMI (pages/detail/detailwxml) 代码 片段 添加 如 下 : 


EDO] TW 


0 .二 


。 <VIiew Class='container'y 


<View Class='title'>{{article.titlel}}</view> 
过 了 IEW Class='poster'> 
<image src="'{{article.poster}}" mode='widthFix'></image> 
</view> 
<View Class="'content'>{{article.content}}</view> 
<V1iEeW class="'add date'> 时 间 : {{article.adqd date}}</view> 
<button wx:1f='{{isAdd}}' plain bindtap='cancelFavorites'>Y 已 收藏 </ button> 
<button wx:else plain bindtap="'addFavorites' >y 单 击 收藏 </ button> 


/view> 


对 应 的 WXSS (pages/detail/detail.wxss) 代码 片段 添加 如 下 : 


On 


a 


} 


/*“ 早 击 收藏 ”按钮 */ 


- buttontl 


width: 2200rpx; 
height: 100rpx; 
margin: 20Irpx auto; 


对 应 的 JS (pages/detail/detailjs〉 中 onLoadO 国 数 的 代码 请 段 修改 如 下 : 


nn 


cp ~ 晤 ， 


onLoad: function(options) I 


// 检 查 当 前 新 闻 是 否 在 收藏 严 中 
var article~=wx.getSstorageSync (id); 
/ /已 存在 
if (article ) 1 
十 hhIs -SetData({ isAdd: true 1}) 


} 
// 不 存在 
else I 
this.setData({ isAdd: false }) 
} 
}, 


继续 在 detail.js 文件 中 退 加 addFavoritesO0 和 cancelFavorites0 〇 函数 ， 用 于 单 击 洪 加 /取消 新 


属 收 藏 : 
1. Page l(t{ 
2. // 江 加 到 收藏 夹 
2 addFavorites: function(options)} { 
4. let article=this.data.article; // 著 取 当 前 新 闻 
Ee wxX.SetStorageSync (article.id, article); /7/ 深 加 到 本 地 绥 存 
6. this setDatall Tndd- True 1)- / /更新 按钮 显示 
a } ， 
8.  // 取 消 收藏 
ER cancelFavorites: function() i 
10. let article=this.data.article; /7/ 聊 取 当 前 新 闻 
1 le WX.removeStorageSync (article.id); /7/ 从 本 地 缓存 删除 
二 this .setData({f isAdd: false }); / /里 新 按钮 显示 
Ly 


1 4= 


{HY 第 12 章 综合 设计 应 用 实例 一 高 校 新 闻 小 程序 


现在 从 首页 开始 预 和 多 ,选择 其 中 任意 一 篇 新 闻 进 入 detail 页 面 ， 并 尝试 单 击 收藏 和 取消 。 
此 时 页 面 效 果 如 图 12-26 所 示 。 


生生 重生 本 What 过 


各 重要 重生 We hat 全 


< < 


俄罗斯 联邦 驻 华 大 使 杰 尼 率 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 冈 译文 全 集 》 赠 予 


俄罗斯 联邦 驻 华 大 使 杰 尼 认 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 冈 译文 全 集 》 赠 予 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 


[Kk Console 
js.. 
key 
264698 


已: Console 


Key 


杰 尼 索 夫 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 
记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 《 力 冈 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 参 迁 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 区 尔 、 大 使 助理 、 载 斯 
社 记者 ， 我 校 校 办 主任 曾 歼 明 、 出 版 社 社 长 张 奇 
才 ， 我 校 杰出 校友 、 俄 罗斯 人 民 友 谊 勋章 和 利 哈 乔 
去 院士 奖 获得 者 、 中 国 俄罗斯 文学 研究 会 会 长 刘 葡 
飞 教 授 等 参加 了 会 见 。 

时 间 : 2018-03-05 


”已 收藏 


(a) 己 经 收藏 新 闻 


Sources Network Security 


Value 


Audits 


杰 尼 窒 夫 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 
记 顾 和 家山， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 《 力 浆 译文 全 集 》。 俄 罗斯 驻 华 大 使 馆 参赞 
梅 利 尼 科 娃 、 大 使 馆 一 秒 仇 蕊 尔 、 大 使 助理 、 塔 斯 
社 记者 ， 我 校 校 办 主任 曾 黎明 、 出 版 社 社 长 张 奇 
才 ， 我 校 杰出 校友 、 俄 罗斯 人 民 友谊 勋章 和 利 哈 乔 
夫 院 士 奖 获得 者 、 中 国 俄罗斯 文学 研究 会 会 长 刘 文 
飞 教授 等 参加 了 会 见 。 

时 间 : 2018-03-05 


| w 点 击 收藏 | 


(b) 取消 收藏 新 闻 


Storage AppData Wxml 


Sensaor 


Trace 


+ Object {qd""264698" "title "SA 大 会 刘 民 荣 委 廊 iD 琶 客 


(c) 添加 本 地 缓存 


Sources Network Security 


Audits 


Storage AppData Wxml 


(d) 删除 本 地 缓存 


图 12-26 ”新闻 页 中 “点 


个 人 中 心 页 逻辑 


击 收藏 ”按钮 的 使 用 效果 


Sensor 


Trace 


个 人 中 心 页 主要 有 3 个 功能 震 要 实现 ， 一 是 获取 微 信 用 户 信 息 ， 二 是 著 取 收藏 列表 ， 三 
1) 获取 短信 用 户 信 息 
修改 my.wxml 代码 ， 退 加 <button> 组 件 作为 登录 按钮 ， 并 且 使 用 wx:if 和 wx:else 属性 让 
未 登录 时 只 显示 按钮 ， 登 录 后 只 显示 头像 和 了 昵称。 
WXML (pages/my/my.wxml) 代码 片段 修改 如 下 : 


s7P 微 信 小 程序 开发 零 基础 入 门 “ 丰 Jo 


1. <view 1q= "myYLOg1LIDn > 
Wa <block wx:1if='{1{isLogin}}'> 
号 证 <image id='myIcon' src='{{src}}'></image> 
a <text id='nickName'>{{nickName} }</text> 
站 </block> 
6. <button wx:else> 未 登录 ， 点 此 登录 </button> 
717. </view> 
此 时 页 面 效 果 如 图 12-27 所 示 。 


“俄罗斯 联邦 驻 华 大 使 杰 尼 索 去 会 见 校 党 


委 书 记 顾 家 山 一 行 并 接受 《 力 网 译文 全 
集 》 赠 予 一 一 2018-03-05 


图 12-27 个 人 中 心 未 登录 状态 效果 图 


在 mywxml 页 面 中 修改 <button> 组 件 的 代码 ， 为 其 奶 加 获取 用 户 信 息 事 件 ， 代 码 厂 段 
如 下 : 


l <button wx:else open—type="'getUserinfo" bindgetuserinfo='getMyInfo'> 


2 未 登录 ， 扣 此 登录 


3 </bputton> 


其 中 open-type='getUserInfo' 表 示 激 活 获 取 微 信用 户 信 息 功 能 ， 然 后 使 用 bindgetuserinfo 
属性 表示 获得 的 数据 将 传递 给 自 定义 函数 getMyInfo0， 开 上 者 也 可 以 使 用 其 他 名 称 。 
在 myjs 文件 的 PageO 内 部 退 加 getMyInfo0 函 数 ， 代 码 片 段 如 下 : 
1. getMyInfo: function(e) 1 


2 CONnSsSole.1log(e.detail .userinfio) 
3= |} 


保存 并 预览 项 目 ， 单 击 按钮 后 如 果 Console 控制 台 能 够 成 功 输出 一 段 数据 就 说 明 获 取 成 
功 ， 如 图 12-28 所 示 。 


Dm] 
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[RK Console Seurces Netwaork Secuyrity Audits Sterage AppData Wxml Sensor Trace 


司 | top 了 | Filter Default levels ™ 


Vv {nickName: "WB", gender: 2, Language: "zh _CcN", city: "Wuhu"”, province: "Anhui"”, ..} 
avatarUrl: "https://wx.qloso.cn/mmopen/vi 32/Q8j4TwGTfTJjer@sqPDflrMTdlVXBIGiIbHxibXvMONnpco 
city: "Wuhu”" 
country: “ChiIna 
gender: 2 
language: "zh _cN" 
nickName:;“" 周 小路 
province: "Anhui" 

bp proto : Object 


12-28 ”Console 控制 台 输 出 内 容 


修改 myjs 文件 中 getMyIfo0 函 数 的 代码 ， 将 信息 更 新 到 动态 数据 上 ， 代 码 睛 段 如 下 : 
// 获 取 微 信用 户 信息 


getMyInfo: function(e) 1 
let 1info=~e.detail userinfo; 
this.setDatal(t 
es i / /人 硝 认 登录 状态 
Sve TT7TO VALarUrl. // 里 新 图 片 来 源 
nickName: info.nickName // 更 新 昵称 
}) 
} Fr 


此 时 已 完成 登录 功能 ， 预 宛 效 采 如 图 12-29 所 示 。 


重重 志和 和 Et < TTTT YS 


周 小 由 @® 


我 的 收藏 (1) 


有 “ 供 罗 斯 联邦 驻 华 大 使 杰 尼 案 夫 会 见 校 党 = 全 罗 斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 
委 书 记 顾 家 山 一 行 并 接受 《 力 网 译文 全 


华 》 哺 巴 一 一 2018-03-05 


委 书 记 顾 家 山 一 行 并 接受 《 力 网 译 女 全 
集 》 赠 了 予 一 2018-03-05 


年 


枫 页 和 全 | 


Ca) 页 面 初始 效果 (Cb) 单 击 按钮 后 的 效果 
图 12-29 个 人 中 心 页 获取 微 信用 户 信息 效果 图 


2) 获取 收藏 列表 
修改 mywxml 代码 ， 将 “我 的 收藏 ”后 面 的 数字 更 改 为 动态 数据 效果 。 
WXML (pages/my/my.wxml) 代码 片段 如 下 : 


<text> 我 的 收藏 ({ {num}}) </text> 


村 7 本 ” 微 信 小 程序 开发 零 基础 入 门 “ 志 ye 


对 应 的 JS (pages/detaiydetailjs) 中 data 属性 的 代码 片段 修改 如 下 : 


- Page (tl{ 
data: I 


TN 
E 
OO 


继续 在 detail.js 文件 中 追加 getMyEFavoritesO 图 数 ， 用 于 展示 真正 的 新 闻 收 藏 列表 。 
对 应 的 JS (pages/my/my.js〉 代 公证 段 如 下 : 


1. Page l(t{ 

2.  // 获 取 收 藏 列表 

i getMyFavorites: function () 1{ 

有 let info=wx -getStoradgdeInfoSync (1) : // 读 取 本 地 缓存 信 息 
Te kevs=into. keyss / /获取 全 部 key 信息 
6. let num=kevys .length; / /获取 收藏 新 闻 数 量 
Ts 

后 二 let myList=|[|]; 

9. for (var i=0; i<nums: i++}) 1 

10. let ob=~wix .getstorageSync (keys [il]}; 

i mvyTi st .Push (obj); // 将 新 闻 添 加 到 数组 中 
下 二 } 

13. / /更 新 收藏 列表 

14. this.setDatal(t 

I newsList: myList, 

16-. num: num 

工 / . }); 

| 

19.1) 


最 后 修改 myjs 中 的 getMyInfoO) 函 数 ， 为 其 退 加 关于 getMyFavorites0 〇 函数 的 调用 。 
对 应 的 JS (pages/my/my.js》 代 人 码 片 段 如 下 : 


1. Page l(t{ 

/ /获取 人 短信 用 户 信 息 

本 getMyInfo: function(e) { 

4. let info=e.detail .userintfo; 

3 this.setDatal(t 

6 igLogin: true; // 人 确认 登录 状态 
7 Te inio avatarUrl / /里 新 图 片 来 源 
8 nickName: info.nickName / /里 新 昵称 


}) 
LD // 获 取 收 藏 列表 


下 this.getMyFavorites () : 
LE 
13=1) 


现在 从 自 页 开 始 预 帘 ， 选 择 其 中 任意 两 态 新 闻 进 入 detail 页 面 ， 开 科 试 早 击 收藏 。 然 后 
退出 切换 到 个 人 中 心 页 ， 登 录 后 查看 收藏 效果 。 
此 时 页 面 效 末 如 图 12-30 所 示 。 
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周 小 贝 外 
找 的 收藏 (2] 


俄 天 斯 习 寿 福 些 大 使 过 尼 案 夫 会 见 核 党 
| 委 书 记 辕 寒山 一 行 并 按时 《 力 办 译文 全 
入 》 山 子 一 一 2018-03-05 


+ 我 以 学 子 代表 国家 从 获 中 国 鸡 包 碟 公开 
- 夫 男 双 亚 军 一 一 2018-11-14 


12-30 ”我 的 收藏 列表 效果 


3) 浏览 收藏 的 新 闻 
单 击 浏览 已 经 收藏 的 新 闻 和 首页 的 单 击 跳 转 新 闻 内 容 功 能 类 似 , 首先 修改 my.wxml 中 收 
癜 列表 的 代码 如 下 : 


Ts 


(LU 


DJ] 


<!-- 收 藏 的 新 闻 列 表 --> 


<V1IeEwW 19 一 mews 一 1S 七 了 > 


<viewCclass="1ist -item'" wiX:for="{{newsList}}" wxX:for—item=" news” wxX: kevy= 
"{{news.id}}"> 
<image src='{{news.poster}}'></image> 
<text class='news— title" bindtap="goToDetail" data—id=" {1{news.1id}}"'> 
ow{{news.title}}——{{news.add date}} 
</text> 
</view> 


具体 修改 为 第 5 行 加 粗 字 体 部 分 ,为 <text> 组 件 添加 了 自 定义 触摸 事件 函数 goToDetail0， 
并 日 使 用 data-id 属性 携带 了 新 闻 id 编号 。 
然后 在 对 应 的 myjs 文件 中 添加 goToDetail0 函 数 的 内 容 ， 代 人 码 片 段 如 下 : 


0 .1}) 


- Page (li 


goToDetail: function(e) 1 


} 


// 获 取 携 布 的 data-iq 数据 
let id=e.currentTarget.dataset.id; 
// 携 市 新 闻 id 进行 页 和 面 跳 转 
wx.navigateTo(l 

Url: " /detail/detail?id="+id 
}) 


运行 效果 如 图 12-31 所 示 。 


村 7 微 信 小 程序 开发 零 基 础 入 门 2? 


我 的 收藏 (2 


“性 所 斯 全 大 吾 此 太 使 索尼 案 去 会 凤 述 党 
委 考 记 大 家 山 一 行 并 接受 《 力 同 译文 多 
上》 人 固 于 一 一 2018-03-05 


对 位 学 子 代 志 国 夺 以 天 中 国 鸡毛 天 心 开 
误 男 双 亚 宇 一 一 2018-11-14 


[a 


[fs 


(a) 我 的 收藏 列表 
图 12-31 


和 和 
[时 


清除 临时 数据 

最 后 裔 要 消除 或 注释 挥 一 开始 为 了 测试 样式 录入 的 临时 数据 ， 以 免 影 啊 整 体 逻 辑 效 果 。 

这 里 需要 清除 的 数据 如 下 。 

e。 站 页 (index.js): data 中 的 临时 新 闻 列 表 数 据 newsList。 

e 潭 半 页 (detall.]s ): data 中 的 临时 新 闻 数 据 article。 

e 个 人 中 心 页 (myjs): data 中 的 临时 收藏 夹 新 闻 数 据 newsList、 临 时 昵称 nickName 以 
及 临时 头像 路 径 地 址 src。 


入 于 疡 联 寺 性 竺 六 使 太 尼 案 夫 会 几 校 早 禾 书 
十 者 i 记 国 家 山 一 行 间接 过 《 力 网 译文 全 集 》 赠 予 
——2018-03-05 
有 + 入 以 学 子 尼 天 国家 了 引 苇 申 国民 老 瑟 公开 塞 办 
2 到 于 军 一 一 2018-11-14 
# 生 以 季子 在 全 省 香 八 届 少 黎民 雇 尾 莞 体 调运 


六 下 动 会 上 言 芍 侍 秆 一 一 2018-11-27 


PS 
和 攻守、 二 = 机 和 2 = 


[| 


重量 者 向 剖 WN at 二 


俄罗斯 联邦 驻 华 大 使 杰 尼 京 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 网 译文 全 集 》 赠 了 予 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 加 斯 驻 华 大 使 
志 尼 索 去 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 
记 顾 家 山 ， 井 接受 了 我 校 出 版 社 赠 予 由 罗斯 大 使 馆 
的 十 套 《 力 网 译 艾 全 集 》 。 俄 罗斯 驻 华 大 使 馆 参 赞 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 龙 尔 、 大 使 助理 、 塔 斯 
社 记 者 ， 我 校 栋 办 主任 曾 黎 明 、 出 版 社 社 长 张 奇 
才 ， 我 核 杰 出 校友 、 俄 罗斯 人 民 友 谊 勋章 和 利 哈 乔 
去 院士 奖 获得 者 、 中国 俄罗斯 妆 学 研究 会 会 长 刘 妆 
飞 教 授 等 参加 了 会 见 . 

时 间 : 2018-03-05 


ee | 


(b) 浏览 收藏 的 新 闻 


浏览 已 收藏 新 闻 的 效果 


生生 庆生 生 WE hat 二 

< 

俄罗斯 联邦 驻 华 大 使 杰 尼 率 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 网 译文 全 集 》 赠 巴 


本 网 讯 【 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 罗斯 驻 华 大 使 
赤 尼 索 夫 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 
记 顾家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 $ 力 浆 译 文 全 集 } 。 信 罗斯 驻 华 大 使 馆 参 千 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 芝 尔 、 大 使 助理 、 塔 斯 
社 记 者 ， 我 校 校 办 主任 曾 笃 明 、 出 版 社 社 长 张 奇 
才 ,我 校 杰出 校友 、 俄 罗斯 人 人 民 友 谊 勋章 和 利 哈 弄 
去 院士 奖 获 得 者 中 国 俄罗斯 区 学 研究 会 会 长 刘 立 
飞 教授 等 参加 了 会 见 。 

时 间 : 2018-03-05 


(b) 单 击 收藏 新 闻 
终 效 果 图 
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重量 看 重音 Ve 人 iat 过 


< 


俄罗斯 联邦 驻 华 大 使 杰 尼 率 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 网 译 葡 全集》 赠 予 


三重 而 生硬 WE hat 后， 15:31 


我 的 新 闻 网 


未 登录 ， 点 此 登录 


本 网 讯 【 校 出 版 社 ) 3 月 2 日 上 午 ， 帕 罗斯 驻 华 大 使 
赤 尼 索 去 在 北 京 俄罗斯 驻 华 大 使 己 会 见 了 校 党 委 书 
记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 《 力 网 译文 全 集 》。 俄罗斯 驻 华 大 使 馆 参 先 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 达尔 ， 太 使 助理 、 塔 斯 
社 记者 ， 我 校 校 办 主 性 曾 瞩 明 、 出 版 社 社 长 张 奇 
才 ， 我 校 杰出 校友 、 俄 罗斯 人 民 友 谊 勋章 和 利 哈 弄 
去 院士 奖 获得 者 中 国 俄罗斯 艾 学 研究 会 会 长 刘 立 
飞 教授 等 参加 了 会 见 。 

时 间 : 2018-03-05 


(c) 取消 收藏 新 闻 (d) 个 人 中 心 未 登录 


Ch 


苗 画 | 


俄罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 委 书 
记 顾 家 山 一 行 并 接受 《 力 同 译文 全 集 》 赠 予 


我 的 收藏 (2) 


本 网 讯 ( 校 出 版 社 ) 3 月 2 日 上 午 ， 俄 加 斯 驻 华 大 使 
杰 尼 索 去 在 北京 俄罗斯 驻 华 大 使 馆 会 见 了 校 党 委 书 
记 顾 家 山 ， 并 接受 了 我 校 出 版 社 赠 予 俄罗斯 大 使 馆 
的 十 套 《 力 网 译 葡 全集》 。 俄 罗斯 驻 华 大 使 馆 参赞 
梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 芯 尔 、 大 使 助理 、 塔 斯 
社 记 者 ， 我 校 模 办 主任 曾 黎明 、 出 版 社 社 长 张 奇 

才 ， 我 校 杰 出 校友 、 俄 罗斯 人 民 友谊 勋章 和 利 哈 乔 
去 院士 奖 获 得 者 、 中 国人 能 罗斯 艾 学 研究 会 会 长 刘 葡 
飞 教 授 等 参加 了 会 见 。 


| - 愤 到 所 联 招 吐 侍 大 使 杰 尼 守 去 会见 塘 党 
| 雪 书 记 屈 家 山 一 行 并 剖 爱 《 力 同 汉文 全 
生 》 刚 子 一 一 2018-03-05 

-我 校 子 子 代 志 国家 队 区 中 国 鸡 筷 球 公 开 
Ry 万 男 驱 亚 盏 一 一 2018-11-14 


时 间 : 2018-03-05 
”已 收藏 


‘1 


= 


[= 


(e) 个 人 中 心 已 登录 (f) 浏览 收藏 的 新 闻 


12-32 〈 续 ) 


应 用 文件 代码 展示 
app.json 文件 的 完整 代码 如 下 : 


1. 1{ 

a | 

人 "pages/index/index™, 
A. "pages/my/my™, 

Se "pages/detail/detail™" 
6. ], 

到 “WlInaow : { 


8. "navigationBarBackgroundColor™: "#328eeb", 


3 微 信 小 程序 开发 零 基础 入 门 


于 "navigationBarTitleText™: "我 的 新 闻 网 ""， 
10。 "navigationBarTextStyle™: "white”™ 

ll. |}, 

i122. “tabBar : 1 

13. “Toolor™=: "#000™, 

14. "selectedColor™.: "#328eeb", 

ke se 

16. { 

oR "PagePath": "pages/index/index", 
18. "iconPath™": "images/index.png", 
下 "selectedIconPath": "images/index blue.png", 
20. "et" 

zd |， 

二 过 二 { 

2 "pagePath": "pages/my/my", 

24. "iconPath™": "images/my.png", 
"selectedIconPath": "images/my blue.png™, 
2 "text": "我 的 " 

et } 

之 本。 ] 

a 

30.} 


app-wxss 文件 的 完整 代码 如 下 : 


1 . /#* 新 闻 列 表 区 域 样 式 */ 

2. /*2-1 新 闻 列 表 容 器 */ 

3. #news—list f 

4. min—height: 600rpx; 
Ee Padding: lorpx; 

ee } 

7. /*2-2 列表 项 目 */ 

8. -1 1sS 七 一 1 七 em1{ 

displavy: Tlexs 


lO0. flex—direction: row; 
11。 border-bottom: lrpx solid grays? 
TL 


13./*2-3 新 闻 图 片 */ 
14..1ist=item imagel 
13. width:230rpx; 
16 heighti: Lo0rpxs 
li. margin: lOrpx; 
18.} 

19./*2-4 新 闻 标 题 */ 

20. .news—titlel 

21. width: 100%; 

22. displavy: block; 
30 Tine heiqht: 60rpxs 
24. font—size: lOpt; 
al 


页 面 文件 代码 展示 
1) 首页 (Iindex) 代码 展示 


WXML (pages/index/index.wxml) 完整 代码 如 下 : 


1 . <! 一 -幻灯 片 深 动 --> 


2. <SWiper indicator—dots="true™ autoplay="true™” interval="5000™ duration—"500"> 
: <block wx:for="{{swiperIimg}}™ wx:key="swiper{{index}}"'> 


4. <SWiper—item> 
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i <image src="{{item.src}}" class="slide-image"™" /> 
6. </swiper—item> 

"i </block> 

8. </swiper> 


> ES < | > 


10. <View lid='news—l1ist"'> 

证 <View Class="1ist- -item’' wx:for="{{newsList}}"” wx:for itemQ~—=" "news" 
wx:key="{{news.1d}}"»> 

下 二 <image src='{{news.poster}}'></image> 

13. <text class="'news-title" bindtap="goToDeta1il" data—id="{{news.1id}}"'> 

14. Of{{news.title}}——{{news.add date}} 

和 号 二 </text> 

16. </view> 

LW </view> 


WXSS (pages/Index/index.wxss) 完整 代码 如 下 : 


1。 /sswiper 区 域 样式 #/ 

2. /*1-1 swiper 组 件 */ 

3. Swiper | 

4. height: 400rpx; 

7. | 

6. /#1-2 swiper 中 的 图 片 #/ 
1. Swiper image { 

8. width: 100%; 

= height: 100%; 

10.} 


JS (pages/index/index.js) 完整 代码 如 下 : 


1 。 Var common=require("'../.-./utils/common.-.js') // 引 用 公共 Js 文件 
2. Page ll 
加 二 data: I 


有 // 约 灯 户 篆 材 


人 SwWwiperImg: | 

Se { src: 'http://www.ahnu.edu.cn/uploads/20180305/20180305130736 25127.jpg' }, 
ee { src: 'http://www.ahnu.edu.cn/uploads/20181114/20181114090202 43004 .png'}, 
Re { sre: "http: /Www -ahmi.edi.cn/uploads/20181127/201811270613]9 94716.png")} 
二 ] 

lO0. 上 


11- goToDetail: functionte)} I 


1 / /获取 携带 的 data-id 数据 


下 六 let id=e.currentTarget.dataset.1d; 
14: / /携带 新 闻 id 进行 页 面 跳 转 

由 WwWX -naVlL 可 ateITo (1{ 

16. url: '../detail,/detail?id="'+id 
11. }) 

18. 上 


19. onLoad: function(options)} { 


20. / /获取 新 闻 列 表 


5 let list=common .getNewsL1ist () 

2 / /更新 列表 数据 

J this.setDatal({ newsList: 1ist }) 
之 

2 


2) 新 闻 页 (detail) 代 但 展示 
WXML (pages/detaildetail wxml) 完整 代码 如 下 : 


于 5 习 。 微 信 小 程序 开发 零 基础 入 门 


<Vliew Class='container" wx:if="{{article.1id}}'> 


Hiew Class="title sllarticle titflell</view> 
<VIiew Class="poster'> 
<image src='{{article.poster}}"' mode='widthFix'></image> 
</Vview> 
<View Class='content'>{{article.content}}</view> 
<V1Iew class='"'adq date'> 时 间 : {{article.adqd date}}</view> 
<button wx:1if="{{isAdd}}" plain bindtap~="'cancelFavorites'" > 已 收藏 </pbutton> 
<button wx:else plain bindtap='addFavorites'>”¥ 单 击 收 藏 </button> 


10.</view> 


WXSS (pages/detail/detail.wxss) 完整 代码 如 下 : 


1 。 /#* 整 体 容器 */ 


-Containert 


Padding: lorpx; 
记 到 Eligqn: CenEery 


6. /+*+ 新 闻 标 题 */ 


le ne ed 


Taont sirer LA4pts 
line—height: 80rpx; 


11 ./* 新 闻 图 片 #/ 


12..poster imagel 


width: 100%; 


15.V* 新 闻 正 文 */ 
16..contentt 


text—aligqgn: left; 
font—size: l2pt; 
line—height: 60rpxs 


21 ./* 新 闻 日 期 */ 
22--adq datel{ 


font—size: l2pt; 
text—align: IrIight; 
line—height: 30rpx; 
margin—right: 25rpx; 
margijin—top: 20rpx; 


29./*“ 反 击 收藏 ”按钮 */ 


30.buttont 


width: 220rpx; 
height: lO00rpx; 
margin: 20rpx auto; 


JS (pages/detail/detail.js〉 完 整 代 码 如 下 : 


1 。 var Common~=require('../../utils/common.j]s") /1/3 引用 公共 Js 文件 
2. Page (ll 
// 漆 加 到 收藏 来 
addFavorites: function(options) { 
let article=this.data.article; /7 获取 当前 新 闻 
wx .SetSstorageSvync (article.id, article); / /添加 到 本 地 缓存 
this-setDatalrf isAdd: true 1}): // 里 新 按钮 显示 


}, 
/ /取消 收藏 
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10. cancelFavorites: function() ff 


11. Let aartiele thie data qrtiele- / /获取 当前 新 邮 
WX -TemoweStoragdeSYync (article-idad): // 从 本 地 缓存 删除 
3 this setDatal(l isndd: false ]): / /里 新 按钮 显示 
14. jj}, 

15. onLoad: functiont{(options} { 

To let id=options.id; / /获取 页 面 跳 转 来 时 携 币 的 新 闻 id 编号 
Ls Jet result=common .getNewsDetail (1id) 

18. / /获取 到 新 闻 内 容 

外。 if (result.codeQ=="200"") 

D0. this.setData({ article: result .news }) 

21. } 

pa 

2 / /检查 当前 新 闻 古 人 否 在 收藏 灯 中 

24. var article=wx .getStorageSsync (1d); 

2 // 己 存在 

26. i (articCle ts Tl 

a this.setDatal({ isAdd: true +) 

28. } 

2 / /不 和 仔 在 

30. else I 

i this.setData({ isAdd: false 1}) 

Ss } 

332- 1} 

34.1}) 


3) 个 人 中 心 页 (my) 代码 展示 
WXML (pages/my/my.wxml) 完整 代码 如 下 : 


A 

2. <View lid="'myLogin'> 

SS <block wx:1f="{{isLogin}}'> 

4. <image id="myIcon' src="{{src}l}'></image> 
5 . <text id="'nickName'>{{nickNamel} }</text> 
6. </block> 

Be <button wx:else open-—type="getUserlnfo" bindgetuserinfo="getMyInfo'> 
8. 未 登录 ， 扣 此 登录 

加 下 </putton> 

10.</view> 

TIE 我 网 收 二 3 

1l2.<vVview id="'myFavorites'> 

13. <text> 我 的 收藏 ({ {num}})</text> 

14. <1!-- 收 藏 的 新 闻 列 表 --> 


152。 <Vvliew ld='news—l1ist'» 


1]. <ViewcCclass="1ist item" wx:for="{ {newsList}} wx:for litem"news” wx: kevy= 
“"“{{news.1dil}"> 

| <image src="'{{news.poster}}'></image> 

18. <text class="news—title" bindtap="goToDetalill”" data—id=" {1news.1d}}">» 

19. Of{{fnews.title}}——{{news.add date}} 

20. </text> 

过 工人 </view> 


22. </view> 
23.</vView> 
WXSS (pages/my/my.wxss) 完整 代码 如 下 : 


1 . /* 登 录 面 板 */ 
2. #myLogint 
a background—-color: #328eeb; 
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4. height: 400rpx; 
es displavy: Tliexs 


6. flex—direction: column; 

下 align—items: center; 

日 - Justify—content: space—around; 
ed 


10./*1-1 头像 图 片 */ 
11.#myIcont 

12s "widthn: 2Z00rpxs 
13. height: 200rpx; 
14. border—rTradius: v0%s 
15-} 

16./*1-2 微 信 昵称 */ 
17.#nickNamef 

18. color: white;s 
19.1 

20./#* 我 的 收藏 */ 
21.#myFavorites! 
22. padding: 20rpx;s 
过 了 


JS (pages/my/my.js) 完整 代码 如 下 : 


1. Page l(t{ 

a data: 1 

- num: 0 

4. 上 

5. // 获 取 微 信用 户 信 息 

b. getMylInfo: function(e) { 

Ta let info=e.detail .userlinfos 

8. this.setDatal(t 

二 isLogin: true, / /确认 登录 状态 
10. Se // 里 新 图 片 来 源 
| 贾 国 nickName: info.nickName / /更 新 昵称 

Be }) 

13. / /获取 收藏 列表 

14. this.getMyFavorites (}; 

1>. 上 

16. // 获 取 收 藏 列表 

li1. gqetMyFavorites: function() I 

18. let info~wx.getSstorageInfoSync (); // 谈 取 本 地 缓存 信 息 
19. let keys=info.keys; // 狭 取 全 部 key 信息 
20 - let num=keys .length; /7/ 狼 取 收 藏 新 闻 数 量 
A 

a let myList=|[]; 

J for (var i=0; i<num; 1i1+1)}) { 

24. let ob =wX .getSstorageSync (keys [11); 

2 myList.push (ob]j):; // 将 新 闻 添 加 到 数组 中 
26. } 

2 // 更 新 收藏 列表 

Wo this.setDatalt(t 

a newsList: myList, 

30 。 num: num 

31. }); 

32. }, 


33. goToDetail: functiont(le} 1 


34. / /获取 携带 的 aata-id 数据 


2 Jet jd=e.currentTarget .dataset.1id; 
36. / /携带 新 闻 id 进行 页 面 跳 转 


3 wx.navigateTor(l 
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38. url=: ', . /detail/detail?id=" + id 
3 }) 


公共 JS 文件 代码 展示 
JS (pages/utils/common.js) 完整 代 公 如 下 : 


/ /模拟 新 闻 数 据 
const news = |{ 

id: 20640698", 

title: ! 俄 罗斯 联邦 驻 华 大 使 杰 尼 索 夫 会 见 校 党 委 书 记 顾 家 山 一 行 并 接受 《 力 囚 译文 全 集 》 赠 予 '， 

poster: ‘http://www.ahnu.edu.cn/uploads/20180305/20180305130736 25127.jpg", 
Ss content: ' 本 网 讯 《 校 出 版 性 ) 3 月 2 日 上 午 ， 俄罗斯 驻 华 大 使 杰 尼 索 夫 在 北京 俄罗斯 驻 华 
大 使 馆 会 见 了 校 攻 委 书记 顾家 山 ， 并 接受 了 我 校 出 版 社 赠 子 俄 罗斯 大 使 馆 的 十 套 《 力 冈 译 文 全 集 》。 俄 罗 
斯 驻 华 大 使 馆 参 赞 梅 利 尼 科 娃 、 大 使 馆 一 秘 伊 巧 尔 、 大 使 助理 、 塔 斯 社 记者 ， 我 校 校 办 主任 曾 歼 明 、 出 
版 社 社 长 张 奇 才 ， 我 校 杰 出 校友 、 俄 罗斯 人 民 友 证 勋章 和 利 哈 乔 夫 院 士 奖 获得 者 、 中 国 俄罗斯 文学 研究 
会 会 长 刘 文 飞 教授 等 参加 了 会 见 。 '， 


Cn 此 ui 请 


i add date: “2018-03-09" 
38. jj, 
3s "| 


10. id: "T304083", 

I title: ' 我 校 学 子 代 表 国 家 队 著 中 国 羽毛 球 公 开赛 男 双 亚 革 '， 

之。 poster: 'http://www.ahnu.edu.cn/uploads/20181114/20181114090202 43004.png", 
13. ”content: ， 本 网 讯 (体育 学 院 徐 梦 涛 ) 11 月 11 日 ， 世 界 羽 联 中 国 羽 毛 球 公 开赛 在 福州 落 
下 帷幕 。 在 男子 双打 半 决 赛 中 ， 我 校 2018 级 运动 训练 专业 学 生 谭 强 与 搭档 何 济 霆 以 2:0 战胜 印尼 组 合 
并 哈 末 。 阿 山 /至 德 拉 ， 首 级 决赛 。 决 赛 中 ， 这 对 年 轻 组 合 以 1 : 2 负 于 现世 界 排名 第 一 的 印尼 组 合 ，: 
得 了 本 座 比 赛 的 亚 车 。 这 也 十 谭 强 在 本 年 度 内 获得 的 最 好 成 绩 。 '， 


] 4 . add date: “2018-1]1-14" 


1 7 I 

18: title: ' 我 校 学 于 在 全 省 第 八 届 少 数 民族 传统 体育 运动 会 上 吾 获 佳绩" ， 

as poster: ‘http://www.ahnu.edu.cn/uploads/20181127/20181127061319 94716.png", 
% 0 导 content: ' 本 网 讯 ( 体 育 学 院 分 华 刚 ) 11 月 18 日 至 23 日 ， 由 安徽 省 人 民政 府 主办 ， 省 民 
委 、 省 体育 局 和 蚌 埋 市 人 民政 府 承 办 的 安徽 省 第 八 届 少 数 民 族 传 统 体育 运动 会 在 蚌 塌 市 成 功 举 行 ， 全 省 
16 个 地 市 代表 团 近 1300 名 运动 员 、 教 练 员 、 和 裁判 员 参 加 了 本 座 运 动 会 。\n 本 届 运 动 会 共 设 武术 、 民 族 
式 摔 路 、 建 球 、 跃 球 、 押 加 、 避 脚 竞 速 、 了 螺 和 板 畦 竞 速 8 个 项 目 。 我 校 组 建 了 由 周 莫 雅 、 王 和 章 、 王 
强 等 23 名 少数 民族 学 生 组 成 的 运动 员 队 伍 ， 代 表 芜 湖 市 参加 了 融 脚 范 速 、 武 术 、 践 球 、 陀 螺 和 板鞋 范 速 
5 个 大 项 的 比赛 。 经 过 激烈 角逐 ,我 校 运 动 健儿 共 获 得 4 个 一 等 奖 (第 1 名 )，6 个 二 等 奖 〈 第 2 一 4 名) 
9 个 三 等 奖 (第 5 一 8 名 ) 的 优异 战绩 ， 出 色 地 完成 了 比赛 任务 。 '， 

eal WS add vate: “2018=11=27" 

2。 |} 

3.1]; 

24. 

25.// 获 取 新 闻 列 表 

26.function getNewsList()} I 

2 et List. = "| 

-Hs Tor (Ivar 1 = 0 1 mews Lengih; TFI 1 

We lJet ob] = {}s 

30. obj.id = news|[il.id:; 


全 国 ob]j .poster = news|[1il|] .poster; 

Ep obj-.add date = news|[il|.add date; 
3 引 3 obl-title = news[1i|] -title; 

34. 1ist.push (ob])}); 

| 


36. return list; // 返 回 新 闻 列 表 
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39.// 获 取 新 闻 内 容 

40 .function getNewsDetail (newsID) | 
41. let msg = { 

42 . code: '404'，// 没 有 对 应 的 新 闻 


43. news: {} 

44- 上 

45- for (var i = 0; i < news.length; i++) 1{ 
46. if (newsID == news[i] .idy) { 7/ 匹配 新 闻 id 编 亏 
47- msg.code 三 "200"': // 成 功 

A48. msg.news = news [i]; // 更 新 当前 新 闻 内 容 
49. break; 

J0. } 

su 

52. return msg; // 返 回 查 找 结果 

= 

Dd. 

与 瑟 /去 

56. * 对 外 上 暴露 接口 

Si 

58.module.exports = { 


J9. gqetNewsList: getNewsL1ist, 
60. getNewsDetail: getNewsDetail 


通过 新 闻 小 程序 项 目的 开发 练习 主要 复习 了 以 下 知识 点 和 操作 : 
。 小 程序 项 目的 创建 步骤 ; 

。 于 动 新建 小 程序 应 用 文件 和 页 面 文件 的 步骤 ; 

。 导航 栏 标题 、 背 景 斋 色 和 文字 颜色 的 设置 方法 ; 

e tabBar 的 创建 方法 ; 

。 页 面 布局 和 样式 设计 的 基本 方法 : 

。 使 用 双 花 括 写 {个 } 生 成 动态 数据 的 方法 ; 

。 使 用 setData0 重 置 动态 数据 的 方法 ; 

e Wx:for、wx:if 和 wx:else 属性 的 用 法 ; 

。 公共 函数 的 创建 、 导 出 和 调用 方法 ; 

。 本 地 绥 存 数据 的 谈 取 和 删除 ; 

。 使 用 按钮 的 open-type 属性 读 取 微 信 个 人 信息 的 方法 ; 

。 页 面 导 航 跳 转 和 数据 携带 的 用 法 ; 

。 项目 预 贞 和 其 机 调试 的 步骤 。 

本 书 到 此 结束 ， 和 希望 读者 朋友 们 可 以 通过 学 习 做 出 上 自己 喜欢 的 小 程序 项 目 。 


个 人 开 妈 者 服务 关 目 


一 级 分 类 


快递 业 与 邮政 


教育 


出 行 与 区 通 


生活 服务 


工具 


二 级 分 类 


邮政 
教育 信息 服务 


环保 回收 /废品 辐 收 


婚庆 服务 
点 评 与 推荐 
餐厅 排队 


摄影 /扩印 
排队 


办 人 
,= 


旅游 攻略 
图 片 /音频 /视频 


政 

谐 
RT 
HA 

暴 

率 

约 


过 息 
9 
报价 /比价 


教育 
EE 
日 
天 1 
PAA 
Ea 
言 忌 
效率 
页 经 
让 


三 级 分 类 
寄 件 / 收 件 
查 件 


| || | ~ 


.~ | | ~ 


于 了 微 信 小 程序 开发 零 基 础 入 门 志 y 


一 级 分 类 二 级 分 类 
法 健 服 务 


商业 服务 会 展 服务 
一 般 财 务 服务 
农林 牧 渔 
体育 培训 
用 在 线 健 身 


二 级 分 类 
法 律 咨 询 
在 线 法 律 服务 


1/ 
1/ 
/ 
/ 


注意 : 面向 个 人 开发 者 开放 的 服务 类 目 会 随 着 相关 政策 、 法 律 法 规 以 及 平台 规定 的 变 


化 而 变化 ， 请 开发 者 以 提交 时 开放 的 类 目 为 准 ， 本 文档 仅 供 参考 。 


1001 


100> 
1006 
1007 
1008 
1011 
1012 
1013 
1014 
1017 
1019 
1020 
1022 
1023 
1024 
1023 
1026 
1027 
1028 
1029 
1030 
1031 
1032 
1034 
1033 
1036 
1037 
1038 
1039 
1042 
1043 
1044 
1043 
1046 
1047 


小 程序 场景 值 


场景 值 ID 


说 明 
发 现 栏 小 程序 主 入 口 ，“ 最 近 使 用 ”列表 (从 基础 库 2.2.4 版 本 起 将 包含 “我 的 小 程 订 ” 
列表 ) 
顶部 搜索 框 的 搜索 结果 页 
发 现 栏 小 程序 主 入 口 搜 索 杠 的 搜索 结果 页 
单 人 聊天 会 话 中 的 小 程序 消息 卡片 
群 聊 会 话 中 的 小 程序 消 娠 卡片 
扫 摘 二 维 但 
长 按 图 片 识别 二 维 人 码 
手机 相册 选取 二 维 码 
小 程 厅 模板 消 忆 
前 往 体 验 版 的 入 口 页 
微 信 和 钱包 
公众 号 profile 页 相关 小 程序 列表 
聊天 顶部 置顶 小 程 计 入口 
安 时 系统 条 面 图 标 
小 程序 profile 页 
扫 摘 一 维 但 
附近 小 程序 列表 
顶部 搜索 框 的 搜索 结果 页 的 “使 用 过 的 小 程序 ”列表 
我 的 卡 包 
卡 券 详情 页 
在 目 动 化 测试 下 打开 小 程 夺 
长 按 图 片 识别 一 维 人 码 
手机 相册 选取 一 维 码 
微 信 文 付 完成 页 
公众 号 目 定 义 玉 蛙 
App 分 盏 消息 卡片 
小 程序 打开 小 程序 
从 万 一 个 小 程序 返回 
播 电 视 
添加 好 友 搜 索 框 的 搜索 结果 页 
公众 号 模板 消 忆 
市 shareTicket 的 小 程序 消 晨 卡片 ( 评 情 ) 
朋友 圈 广 告 
朋友 圈 广 告 详情 页 
扫 摘 小 程序 码 
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场景 值 ID 说 明 
1048 长 按 图 片 识别 小 程序 人 码 
1049 手机 相册 选取 小 程序 码 
1052 卡 券 的 适用 门店 列表 
1053 搜 一 搜 的 结果 页 
1054 顶部 搜索 框 小 程序 快捷 入 口 
1056 音乐 播放 需 计 单 
1057 钱包 中 的 银行 卡 详 情 页 
1058 公众 号 艾 章 
1059 体验 碑 小 程序 绑 定 邀请 页 
1064 微 信 连 Wi-Fi 状态 栏 
1067 公 炊 号 文章 广告 
1068 附近 小 程序 列表 广告 
1069 移动 应 用 
1071 钱包 中 的 银行 卡 列表 页 
1072 二 维 码 收 先 页 面 
1073 客服 消 奶 列表 下 发 的 小 程序 消 因 卡片 
1074 公众 号 会 话 下 发 的 小 程序 消息 卡片 
1077 播 周 边 
1078 连 Wi-Fi 成 功 页 
1079 微 信 游戏 中 心 
1081 客服 消息 下 发 的 文字 链 
1082 公众 写 会 话 下 发 的 文字 链 
1084 朋友 圈 广 告 原生 页 


续 表 


1089 微 信 聊天 主 界面 下 拉 ，“ 最 近 使 用 ” 柱 ( 从 基础 库 2.2.4 版 本 起 将 包含 “我 的 小 程序 ” 栏 ) 


1090 长 按 小 程序 右上 角 菜 单 唤 出 最 近 使 用 历史 
1091 公众 号 文章 商品 卡片 

1092 城市 服务 入 口 

1095 小 程序 广告 组 件 

1096 聊天 记录 

1097 微 信 支 付 签约 页 

1099 页 面 内 要 插 件 

1102 公众 号 profile 页 服务 预览 


1103 上 发现 栏 小 程序 主人 入 口 ，“ 我 的 小 程序 ”列表 〈 从 基础 库 2.2.4 版 本 起 废弃 )》 
1104 微 信 聊天 主 界面 下 拉 ，“ 我 的 小 程序 ” 栏 〈 从 基础 库 2.2.4 版 本 起 废弃 ) 


小 程序 预定 颜色 


小 程序 目前 的 预定 颜色 有 148 个 ， 颜 色 名 称 大 小 写 不 敏感 。 


颜色 名 称 中 文 名 
AliceBlue 240. 248, 255 爱丽 丝 蓝 
AntiqueWhite 250, 235, 215 古董 白 
Aqua 0, 255, 255 青色 
Aquamarine 碧绿 
Azure 天 蓝 色 
Beige 青白 色 
Bisque 米色 
Black 255. 228, 196 陶 坯 黄 
BlanchedAlmond 黑色 
Blue 杏仁 白 
BlueViolet 蓝 色 
Brown 蓝 紫 色 


BurlyWood #deb887 165. 42. 42 褐色 
CadetBlue #5f9ea0 222. 184. 135 使 木 神 
Chartreuse #7fff00 军服 蓝 
Chocolate #d2691e 查 特 酒 绿 
Coral #7f50 珊瑚 红 
CornflowerBlue #6495ed 天 车 痪 昌 
Comsik fff8dc 玉米 重 黄 
Crimson #dc143c 绯红 
Cyan #00fFF 青色 
DarkBlue #00008b 深蓝 
DarkCyan #008b8b 深 青 
DarkGoldenRod #b8860b 深 金 菊 黄 
DarkGray #a9a9a9 暗 灰 
DarkGrey #a9a9a9 暗 灰 
DarkGreen #006400 深 绿 
DarkKhaki #bdb76b 深 卡 其 色 
re #8b008b 深 屈 红 
DarkOliveGreen #556b2f 深 橄榄 绿 
DarkOrange #ff8c00 深 楼 
DarkOrchid #9932cc 深 洋 蓝 紫 
DarkRed #8b0000 深 
DarkSalmon #e9967a 深 人 鲜红 


oo - 
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颜色 名 称 
DarkSeaGreen 
DarkSlateBlue 
DarkSlateGrey 
DarkTIurquolse 
DarkViolet 
DeepPink 
DeepSkyBlue 
DimGray 
DodgerBlue 
FireBrick 
Floral White 
ForestGreen 
Fuchsia 
Gainsboro 
GhostWhite 
Gold 
GoldenRod 
Gray 
Grey 
Green 
GreenYellow 
HoneyDew 
HotPink 
IndianRed 
Indigo 
Ivory 
Khaki 
Lavender 
LavenderBlush 
LawnGreen 
LemonChffon 
LightBlue 
LightCoral 
LightCyan 


LightGoldenRodYellow 


LightGray 
LightGreen 
LightPink 
LightSalmon 
LightSeaGreen 
LightSkyBlue 
LightSlateGray 
LightSteelBlue 
LightYellow 


Lime 


RGB 十 六 进 制 
#8fbc8f 
#483d8b 
#2{41{4f 
#00cedl 
#9400d3 
#{f1493 
#00bfff 
#696969 
#1le90ff 
#b22222 

fffaf0 

#228b22 

#{f00ff 

#dcdcdc 


间 


- ; : 
pom 


#{fd700 
#daa$s20 
#808080 
#808080 
#008000 
#adff2f 


#ff69b4 
#cdscsc 
#4b0082 


#f{0e68c 
#e6e6ta 
#1{1f0fS 
#7cfc00 
#1fffacd 
#add8e6 
#f{08080 
#eQffff 
#fafad2 
#d3d3d3 
#90ee90 
#f{fb6c1 
#ffa07a 
#20b2aa 
#87cefa 
#778899 
#bOc4de 
#tifffe0 
#001f00 


fal 


RGB 十 进 制 


143, 188, 143 
12, 681, 139 


47.79.719 


0. 206, 209 
148. 0. 211 
255.20, 147 
0, 191, 235 
105. 103, 103 
30. 144, 255 
1 78. 34. 34 
233, 230, 240 
34. 139. 34 
253. 0. 235 
220. 220, 220 
248, 248, 235 
2553, 215,0 
218, 165, 32 
128. 128, 128 


128, 128, 
0. 128,0 


128 


173,233,4/ 
240. 233, 240 
255, 105, 180 


203, 92, 92 
75,0, 130 
2335. 235, 240 
240. 230. 140 
230. 230, 230 
233, 240, 243 


124, 232, 


0 


253, 230, 205 
173,216, 230 


240. 128, 


128 


224. 2535, 255 
230, 230, 210 
11 211, 21] 


144. 238, 144 


255, 182, 193 
2535, 160, 122 
32, 178, 170 


135, 206, 


250 


119. 136, 133 
1 76. 196, 222 


255. 255, 224 


0. 235. 0 


续 表 


中 文 名 


深海 洛 绿 
深 岩 蓝 
深 岩 灰 
深 松石 绿 
深 紫 
深 粉 

深 天 蓝 
苷 灰 
湖 蓝 
火 砖 红 
花卉 白 
森林 绿 
洋红 

庚 氏 灰 
幽灵 自 
金色 
爹 菊 黄 
灰色 
灰色 
调和 绿 
黄 绿色 
过 瓜 绿 
攀 粉 
印度 红 
靛蓝 
象牙 白 
卡其 色 
藏 衣 草 紫 
燕 衣 草 红 
草坪 绿 
柠 样 绸 黄 
浅 蓝 
浅 珊瑚 红 
浅 青 

浅 爹 菊 黄 
亮 灰 
浅 绿 
浅 粉 

浅 刍 红 
浅海 藻 绿 


颜色 名 称 
LimeGreen 
Linen 
Magenta 
Maroon 
MedimumA quaMarine 
MediumBlue 
MedimmmOrchid 
MediumPurple 
MedimmSeaGreen 
MediumslateBlue 
MedliumsSprimgGreen 
MedlumTurquolse 
MedimmVioletRed 
MidnightBlue 
MintCream 
MistyRose 
Moccasin 
NavaloWhlte 
Navy 
OldLace 
Olve 
OliveDrab 
Orange 
OrangeRed 
Orchid 
PaleGoldenRod 
PaleGreen 
PaleTurquoise 
PaleVioletRed 
PapayaWhip 
PeachPuiff 
Peru 
Pink 
Plum 
PowderBlue 
Purple 
RebeccaPurple 
Red 


RosyBrown 


RoyalBlue 
SaddleBrown 
Salmon 
SandyBrown 
SeaGreen 
SeaSshell 


RGB 十 六 进 制 
#32cd32 
#fafQe6 


#800000 
#66cdaa 


#ba5s$d3 
#9370db 
#3cb371 
#7b68ee 
#00fa9a 
#48dlcc 
#c715385 
#191970 
#fSfffa 
#tfe4el 
#f{fe4bs 
#ffdead 
#000080 
#f{dfSe6 
#808000 
#6b8e23 
#ffaSs00 
#ff4500 
#da70d6 
#eee8aa 
#98fb98 
#afeeee 
#db7093 


#ffdab9 

#cd853f 
#f{fcOQcb 

#dda0dd 
#b0eQe6 
#800080 
#663399 


#bc8f8f 
#4169el 
#8b4513 
#f{a8072 
#f4a460 
#2e8b57 


壮 由 : 壮 站 


附录 C ”小 程序 预定 颜色 导 闫 


RGB 十 进 制 


30. 205, 50 
230. 240, 230 
235, 0, 253 


128. 0. 0 
102. 20>， 
0. 0. 203 


170 


186, 83, 211 
147. 112.219 
60, 1 79. 113 
123. 104. 238 
0. 230, 134 
72. 209. 204 
199. 21, 133 
25,23, 112 
245. 235, 230 
255, 228, 223 


55 2908. 
255, 222, 
0, 0, 128 


181 
173 


233. 243, 230 


128, 128,0 


107. 142., 


35 


255. 165. 0 


255, 09. 0 


218, 112, 214 


238, 232. 


170 


132. 231, 132 
173, 238, 238 


219. 112., 


147 


253, 239. 213 


255, 218, 


183 


203, 133, 63 
255, 192, 203 
221, 160. 221 
1 76. 224. 230 
128. 0, 128 
102, 31, 133 


233,0,0 
188, 143, 


143 


63, 103, 225 
139. 69. 19 


230. 128, 114 


244. 164. 96 
46, 139. 87 
253, 243, 238 


中 蓝 
中 洋 蓝 紫 
中 此 

中 海藻 绿 
中 岩 蓝 
中 嫩绿 
中 松石 绿 
中 紫红 
午夜 区 
薄荷 乳白 
雾 玫瑰 红 
唐 皮 色 
士 著 白 
藏青 
旧 备 丝 日 
向 模 色 
敌 模 绿 
橙色 
橘红 
洋 蓝 此 
白金 菊 黄 
白 绿色 
白松 石 绿 
白 紫 红 
番 木 瓜 栖 
粉扑 桃色 
秘 重 红 
粉色 


丽 贝 卡 紫 
红色 
玫瑰 神 


品 是 
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颜色 名 称 RGB 十 六 进 制 中 文 名 
Sienna #a0522d 土 黄 赭 
Silver #cOcOcO 银色 
SkyBlue #87ceeb 天 蓝 
SlateBlue #6a$Sacd 宕 监 
SlateGray #708090 112. 128, 144 石灰 
Snow #fffafa 雪白 
SpringGreen #00fE7f 春 绿 
SteelBlue #4682b4 青 
Tan #d2b48c 日 是 祸 
Teal #008080 鸭 翅 绿 
Thistle #d8bfd8 葡 紫 
Tomato #ff6347 番茄 红 
Turquolse #40e0d0 松石 绿 
Wlolet #ee82ee 紫罗兰 色 
Wheat #fsdeb3 245, 222, 179 麦 包 
White Wf 白色 
WhiteSmoke #fSf5f5 烟雾 白 
Yellow 黄色 
YellowGreen #9acd32 暗 贡 绿色 


注意 : RebeccaPurple 是 CSS Level4 中 的 一 种 新 颜色 ， 是 Web Community 全 体 成 员 以 
队友 Eric 去 世 的 女儿 Rebecca 命名 的 ， 以 此 来 支持 他 。 


图 书 和 资源 文 桂 
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感谢 您 一 直 以 来 对 清华 版 图 书 的 文 持 和 爱护 。 为 了 配合 本 书 的 使 用 ,本 书 
提供 配套 的 资源 ,有 需求 的 读者 请 扫 反 下方 的 “ 书 圈 "做 信 公众 写 二 维 码 ,在 医 
书 专区 下 载 ,也 可 以 拨打 电话 或 发 送 电 子 邮件 咨询 。 

如 果 您 在 使 用 本 书 的 过 程 中 人 过 到 了 什么 问题 ,或 者 有 相关 图 书 出 版 计划 ， 
也 请 您 发 邮件 告诉 我 们 ,以 便 我 们 更 好 地 为 您 服务 。 


Nm ee a EO a WE 


我 们 的 联系 方式 : 
地 址 ,北京 海淀 区 双 清 路 学 研 大 厦 A 座 707 


邮 编 : 100084 
电 话 . 010 一 62770175 一 4604 


资源 下 载 : http://www.tup.com.cn 


电子 邮件 : weijj@tup. tsinghua. edu. cn 
QQ: 883604( 请 写 明 您 的 单位 和 姓名 ) 


用 微 信 扫 一 扫 右 边 的 二 维 码 , 即 可 关注 清华 大 学 出 版 社 公 众 号 " 书 圈 ”。 


